Heim > Artikel > Web-Frontend > Ausführliche Erklärung, wie CSS+HTML das Füllen von Hintergrundbildern implementiert

Ausführliche Erklärung, wie CSS+HTML das Füllen von Hintergrundbildern implementiert

黄舟Original: 2017-07-22 09:16:525415Durchsuche

Einführung:

Heute wollte ich eine persönliche Begrüßungsoberfläche schreiben und habe am Frontend herumgespielt, aber ich hatte es wirklich eilig

Um eine schöne Aussicht zu haben, nehmen Sie sich mehr Zeit, es ist wieder drei Uhr morgens 0.0

CSS erkennt die Füllung von a einzelnes Hintergrundbild

Implementierungsmethode eins:

Verwenden Sie direkt das Hintergrundbildattribut des Body-Elements, das mit mehreren Browsern kompatibel ist und Erfüllt grundsätzlich die Anforderungen

Hintergrundfarbe hinzufügen: #22C3AA;Farbe vor dem Laden von Bildern anzeigen

BUG: Die Seite ist auch klein und unten entsteht eine Lücke

Detailliertes Attribut-Hintergrundattribut in w3school

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<title>hello world</title>    

<style type="text/css">
body {
	margin: 0;
	background-image: url(&#39;bg.jpg&#39;);  
	background-repeat:no-repeat;
        background-position:0% 0%;
  	background-size:cover;
	background-color: #22C3AA;
}
</style>

</head>    
<body>
</body>    
</html> </span>

Implementierungsmethode zwei:

Verwenden Sie p, das Bild kann sich an die Browsergröße anpassen, es treten keine Körperfehler auf

FEHLER: IE11 ist nicht kompatibel, es wird einen geben Grüne Linie (Körperhintergrundfarbe) unten, die sehr unansehnlich ist

Siehe: Hintergrundbilder in HTML an die Browsergröße anpassen

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<title>hello world</title>    

<style type="text/css">
body {
	margin: 0;	
	background-color: #22C3AA;
}
</style>

</head>    
<body>
<!--
<p id="Layer1" style="position:absolute; width:100%; height:100%; background-color: #22C3AA; z-index:-1" >    
<img src="3-bg.jpg" height="100%" width="100%"/>    
</p>
-->
</body>    
</html> </span>

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie CSS+HTML das Füllen von Hintergrundbildern implementiert. 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

Vorheriger Artikel：Wie ist der CSS-Bildlaufleistenstil mit den Browsern IE8 und Chrome kompatibel?Nächster Artikel：Wie ist der CSS-Bildlaufleistenstil mit den Browsern IE8 und Chrome kompatibel?

In Verbindung stehende Artikel

Mehr sehen