Maison >interface Web >tutoriel CSS >Explication détaillée de CSS pour réaliser une image d'arrière-plan de page Web adaptative en plein écran
Explication détaillée de CSS pour réaliser une image d'arrière-plan de page Web adaptative en plein écran
- 小云云original
- 2018-02-07 09:12:308430parcourir
Cet article vous présente principalement les informations pertinentes sur la méthode d'utilisation de CSS pour réaliser des images d'arrière-plan adaptatives en plein écran sur les pages Web. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner sous forme. une référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Arrière-plan de page Web adaptatif plein écran.PNG
Une image d'arrière-plan claire et belle peut ajouter de nombreux points à une page Web, et les concepteurs ajoutent souvent à la page Utilisez une grande image pour l'arrière-plan. Nous ne voulons pas que l'image soit déformée en raison de différentes résolutions, ni que l'arrière-plan soit exposé lorsque l'écran est grand. En bref, nous voulons obtenir un. image qui peut s'adapter à la taille de l'écran sans se déformer. L'image d'arrière-plan est grande et l'image d'arrière-plan ne défilera pas lorsque la barre de défilement défile.
Voici comment procéder avec 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;
}Ensuite, analysons la fonction de chaque ligne de code en CSS :
position:fixed; top: 0; left: 0;
Ces trois lignes laissent Le p entier est fixé en haut et à gauche de l'écran
width:100%; height:100%; min-width: 1000px;
Les deux premières phrases ci-dessus visent à donner au p entier la même taille que l'écran, obtenant ainsi le plein- effet d'écran. Le but de min-width est de garder la taille de p inchangée lorsque la largeur de l'écran est inférieure à 1000 pixels, c'est-à-dire que dans ce cas, lors de la mise à l'échelle de la largeur de l'écran, l'image ne doit pas être mise à l'échelle (elle l'est seulement). valable dans 1000px).
z-index:-10;
Le but de ceci est de faire en sorte que le p entier soit situé en dessous de chaque niveau de la page HTML. Dans des circonstances normales, la valeur z-index du premier niveau créé. est 0, donc si nous écrivons -1 ici, cela peut également être réalisé, mais écrire -10 ici, c'est s'assurer que l'intégralité de p est en bas, car s'il y a trop de niveaux dans la page, utiliser parfois -1 peut pas nécessairement en bas, mais s'il est écrit comme Un grand nombre comme -100 n'a aucun sens. Utilisez index:-10 pour obtenir ce qui ressemble à une image d'arrière-plan. Il s'agit en fait du p le plus courant, mais la relation hiérarchique a changé pour la faire ressembler à une image d'arrière-plan.
background-repeat: no-repeat;
Ce qui précède est l'arrière-plan, ne le répétez pas
background-size: cover; -webkit-background-size: cover; -o-background-size: cover;
Les trois ci-dessus Les phrases ont la même signification, c'est-à-dire Laissez l'image évoluer de manière synchrone avec la taille de l'écran, mais certaines parties peuvent être recadrées, mais elles ne seront pas exposées. Les deux phrases suivantes sont destinées à la compatibilité avec les navigateurs Chrome et Opera.
background-position: center 0;
La phrase ci-dessus désigne la position de l'image, centrée et alignée à gauche.
Recommandations associées :
Tutoriel CSS3 (5) : Image d'arrière-plan de page Web_css3_CSS_Production de pages Web
Paramètre plein écran de l'image d'arrière-plan Web_html/css_WEB-ITnose
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!