Detaillierte Erläuterung von CSS zur Realisierung eines adaptiven Vollbild-Hintergrundbilds für Webseiten-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Detaillierte Erläuterung von CSS zur Realisierung eines adaptiven Vollbild-Hintergrundbilds für Webseiten

小云云

Feb 07, 2018 am 09:12 AM

css背景图片

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Verwendung von CSS zum Realisieren adaptiver Vollbild-Hintergrundbilder auf Webseiten vor. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und es als geben eine Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Webseitenhintergrund adaptiver Vollbildmodus.PNG

Ein klares und schönes Hintergrundbild kann einer Webseite viele Punkte hinzufügen, und Designer fügen oft hinzu es zur Seite Verwenden Sie ein großes Bild für den Hintergrund. Wir möchten nicht, dass das Bild aufgrund unterschiedlicher Auflösungen verformt wird, und wir möchten auch nicht, dass der Hintergrund freigelegt wird, wenn der Bildschirm groß ist Bild, das sich an die Bildschirmgröße anpassen kann, ohne sich zu verformen. Das Hintergrundbild ist groß und das Hintergrundbild scrollt nicht, wenn die Bildlaufleiste scrollt.

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>
<p class="wrapper">
    <!--背景图片-->
    <p id="web_bg" style="background-image: url(./img/bg.jpg);"></p>
    <!--其他代码 ... -->
</p>
</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 lassen Das gesamte p ist Oben und links auf dem Bildschirm fixiert

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

Die ersten beiden Sätze oben dienen dazu, das gesamte p auf die gleiche Größe wie der Bildschirm zu bringen und so die Vollständigkeit zu erreichen. Der Zweck von min-width besteht darin, die Größe von p unverändert zu lassen, wenn die Bildschirmbreite innerhalb von 1000 Pixeln liegt. Das heißt, in diesem Fall sollte das Bild beim Skalieren der Bildschirmbreite nicht skaliert werden (es ist nur so). gültig innerhalb von 1000px).

z-index:-10;

Der Zweck besteht darin, das gesamte p unter jeder Ebene in der HTML-Seite zu erstellen. Unter normalen Umständen der Z-Indexwert der ersten erstellten Ebene ist 0, also kann es auch erreicht werden, wenn wir hier -1 schreiben, aber wenn wir hier -10 schreiben, soll sichergestellt werden, dass sich das gesamte p unten befindet, denn wenn die Seite zu viele Ebenen enthält, kann es manchmal sein, dass -1 verwendet wird nicht unbedingt ganz unten stehen, aber wenn es so geschrieben ist, ist eine große Zahl wie -100 bedeutungslos. Verwenden Sie index:-10, um das zu erreichen, was wie ein Hintergrundbild aussieht. Dies ist eigentlich das häufigste p, 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 oben genannten drei Sätze haben die gleiche Bedeutung, das heißt, dass das Bild synchron mit der Bildschirmgröße skaliert werden soll, einige Teile jedoch möglicherweise abgeschnitten sind, aber nicht weiß sind. Die folgenden beiden Sätze dienen der Kompatibilität mit Chrome- und Opera-Browsern.

background-position: center 0;

Der obige Satz bezeichnet die Position des Bildes, zentriert und nach links ausgerichtet.

Verwandte Empfehlungen:

CSS3-Tutorial (5): Webseitenhintergrundbild_css3_CSS_Webseitenproduktion

JS-Implementierung zum Erstellen von Webseitenhintergrundbildern Methode zum diagonalen Bewegen_Javascript-Fähigkeiten

Vollbildeinstellung des Web-Hintergrundbildes_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von CSS zur Realisierung eines adaptiven Vollbild-Hintergrundbilds für Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Wohin sollte 'Podcast' -Link abonnieren?Apr 16, 2025 pm 12:04 PM

Für eine Weile war iTunes der große Hund im Podcasting. Wenn Sie also "Abonnieren Sie Podcast" verlinkt haben, um zu mögen:

Browser -MotorvielfaltApr 16, 2025 pm 12:02 PM

Wir haben die Oper verloren, als sie 2013 Chrome gingen. Gleiches Geschäft mit Edge, als es Anfang dieses Jahres auch Chrome ging. Mike Taylor nannte diese Veränderungen a "abnehmend

UX -Überlegungen zur WebfreigabeApr 16, 2025 am 11:59 AM

Von trashigen Clickbait -Websites bis hin zu den meisten August der Veröffentlichungen sind die Teilen von Schaltflächen seit langem im gesamten Web allgegenwärtig. Und doch ist es wohl diese diese

Wöchentliche Plattformnachrichten: Apple bereitet Webkomponenten, progressives HTML-Rendering, selbsthosting kritische Ressourcen bereitApr 16, 2025 am 11:55 AM

In der Roundup der Woche geht Apple in Webkomponenten, wie Instagram Insta-Loading-Skripte und einige Lebensmittel für das Denken für selbsthosting kritische Ressourcen sind.

Git pathspecs und wie man sie benutztApr 16, 2025 am 11:53 AM

Als ich die Dokumentation von Git -Befehlen durchschaut hatte, bemerkte ich, dass viele von ihnen eine Option hatten. Ich dachte anfangs, dass dies nur ein war

Ein Farbwähler für ProduktbilderApr 16, 2025 am 11:49 AM

Klingt ein bisschen wie ein schweres Problem. Ist es nicht? Wir haben oft keine Produktaufnahmen in Tausenden von Farben, sodass wir das mit dem mit umdrehen können. Wir auch nicht

Ein dunkler Modus wechselt mit React und ThemeProviderApr 16, 2025 am 11:46 AM

Ich mag es, wenn Websites eine dunkle Modusoption haben. Der dunkle Modus erleichtert mir das Lesen von Webseiten und hilft meinen Augen, sich entspannter zu fühlen. Viele Websites, einschließlich

Einige praktisch mit dem HTML-DialogelementApr 16, 2025 am 11:33 AM

Ich schaue mir das HTML -Element zum ersten Mal an. Ich habe es für eine Weile dessen bewusst, aber Haven ' Es wurde es noch nicht für einen Dreh genommen. Es hat einige ziemlich cool und

See all articles