So passen Sie das CSS-Hintergrundbild an-CSS-Tutorial-php.cn

So passen Sie das CSS-Hintergrundbild an

anonymity

Freigeben： 2019-05-28 15:06:48

Original

8637 Leute haben es durchsucht

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 passen Sie das CSS-Hintergrundbild an

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

Als nächstes analysieren wir die Funktion jeder Codezeile in CSS:

 position:fixed;  top: 0;  left: 0;

Nach dem Login kopieren

Diese drei Zeilen fixieren das gesamte Div oben und links auf dem Bildschirm

 width:100%;  height:100%;  min-width: 1000px;

Nach dem Login kopieren

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;

Nach dem Login kopieren

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;

Nach dem Login kopieren

Das Obige ist der Hintergrund, wiederholen Sie es nicht

 background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;

Nach dem Login kopieren

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;

Nach dem Login kopieren

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!