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

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

黄舟original: 2017-07-22 09:16:525459parcourir

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>

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment le style de barre de défilement CSS est-il compatible avec les navigateurs IE8 et Chrome ?Article suivant：Comment le style de barre de défilement CSS est-il compatible avec les navigateurs IE8 et Chrome ?

Articles Liés

Voir plus