Heim > Artikel > Web-Frontend > So passen Sie das CSS-Hintergrundbild an
So passen Sie das CSS-Hintergrundbild an
- anonymityOriginal
- 2019-05-28 15:06:488567Durchsuche
Ein klares und schönes Hintergrundbild kann einer Webseite viele Punkte hinzufügen. Wir möchten nicht, dass das Bild aufgrund unterschiedlicher Auflösungen deformiert wird In diesem Fall gibt es einen weißen Fleck im Hintergrund. Kurz gesagt, es handelt sich um ein großes Hintergrundbild, das sich an die Bildschirmgröße anpassen kann, ohne dass das Hintergrundbild so scrollt Scrollbar scrollt, sodass das Hintergrundbild angepasst werden kann.
So geht's mit CSS:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>title</title>
</head>
<body>
<div class="wrapper">
<!--背景图片-->
<div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
<!--其他代码 ... -->
</div>
</body>
</html>CSS:
#web_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
} Als nächstes analysieren wir die Funktion jeder Codezeile in CSS:
position:fixed; top: 0; left: 0;
Diese drei Zeilen fixieren das gesamte Div oben und links auf dem Bildschirm
width:100%; height:100%; min-width: 1000px;
Die ersten beiden Die obigen Sätze sollen dafür sorgen, dass das gesamte Div die gleiche Größe wie der Bildschirm hat, um den Vollbildeffekt zu erzielen, und die Mindestbreite dient dazu, die Größe des Div unverändert zu lassen, wenn die Bildschirmbreite innerhalb von 1000 Pixel liegt, was bedeutet In diesem Fall wird beim Skalieren der Bildschirmbreite als nächstes das Bild nicht skaliert (nur gültig innerhalb von 1000 Pixel).
z-index:-10;
Der Zweck besteht darin, das gesamte Div unter jeder Ebene in der HTML-Seite zu erstellen. Unter normalen Umständen ist der Z-Index-Wert der ersten erstellten Ebene 0, wenn wir also hier -1 schreiben, Die Implementierung ist in Ordnung, aber das Schreiben von -10 soll sicherstellen, dass sich das gesamte Div unten befindet, denn wenn es zu viele Ebenen auf der Seite gibt, ist -1 manchmal nicht unbedingt unten, aber es macht keinen Sinn wenn es als große Zahl wie -100 geschrieben wird. Verwenden Sie index:-10, um das zu erreichen, was wie ein Hintergrundbild aussieht. Dies ist eigentlich das häufigste Div, aber die hierarchische Beziehung hat sich geändert, sodass es wie ein Hintergrundbild aussieht.
background-repeat: no-repeat;
Das Obige ist der Hintergrund, wiederholen Sie es nicht
background-size: cover; -webkit-background-size: cover; -o-background-size: cover;
Die obigen drei Sätze haben die gleiche Bedeutung, nämlich das Bild synchron mit der Bildschirmgröße zu skalieren, aber einige Teile kann zugeschnitten werden, wird aber nicht angezeigt. Die folgenden beiden Sätze dienen der Kompatibilität mit Chrome- und Opera-Browsern.
background-position: center 0;
Der obige Satz bedeutet die Position des Bildes, zentriert und nach links ausgerichtet.
Das obige ist der detaillierte Inhalt vonSo passen Sie das CSS-Hintergrundbild an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!