Explication détaillée de la façon dont CSS+html implémente le remplissage de l'image d'arrière-plan

黄舟

Libérer： 2017-07-22 09:16:52

original

5462 Les gens l'ont consulté

Introduction :

Aujourd'hui, je voulais écrire une interface de bienvenue personnelle, et j'ai joué avec le front-end, mais j'étais vraiment pressé

Pour une belle vue, passez plus de temps, il est encore trois heures du matin 0.0

CSS réalise le remplissage d'un image d'arrière-plan unique

Première méthode d'implémentation :

Utilisez directement l'attribut background-image de l'élément body, qui est compatible avec plusieurs navigateurs et répond essentiellement aux exigences

Ajouter une couleur d'arrière-plan : #22C3AA ; Afficher la couleur avant de charger les images

BUG : La page est trop petit et il y aura un espace en bas

Attribut d'arrière-plan d'attribut détaillé dans 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>

Copier après la connexion

Méthode de mise en œuvre deux :

Utilisez p, l'image peut s'adapter à la taille du navigateur, il n'y aura pas de bugs corporels

BUG : IE11 n'est pas compatible, il y aura un ligne verte (couleur d'arrière-plan du corps) ci-dessous, ce qui est très disgracieux

Voir : Rendre les images d'arrière-plan adaptatives à la taille du navigateur en HTML

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!