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

黄舟

Freigeben： 2017-07-22 09:16:52

Original

5508 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!