Maison >interface Web >tutoriel CSS >Comment adapter l'image d'arrière-plan CSS
Comment adapter l'image d'arrière-plan CSS
- anonymityoriginal
- 2019-05-28 15:06:488640parcourir
Une image d'arrière-plan claire et belle peut ajouter beaucoup de points à une page Web. Les concepteurs utilisent souvent de grandes images pour l'arrière-plan de la page. Nous ne voulons pas non plus que l'image soit déformée en raison de différentes résolutions. à afficher sur un grand écran. Dans ce cas, il y a une tache blanche en arrière-plan. Bref, il s'agit d'obtenir une grande image de fond qui puisse s'adapter à la taille de l'écran sans se déformer, et l'image de fond ne défilera pas aussi. la barre de défilement défile, réalisant l'adaptation de l'image de fond.
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>
<div class="wrapper">
<!--背景图片-->
<div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
<!--其他代码 ... -->
</div>
</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 font que l'ensemble du div est fixé en haut et à gauche de l'écran
width:100%; height:100%; min-width: 1000px;
Les deux premiers les phrases ci-dessus visent à ce que le div entier ait la même taille que l'écran, afin d'obtenir l'effet plein écran, et min-width consiste à conserver la taille du div inchangée lorsque la largeur de l'écran est inférieure à 1000 px, ce qui signifie que dans ce cas Ensuite, lors de la mise à l'échelle de la largeur de l'écran, l'image n'est pas mise à l'échelle (valable uniquement dans les 1000 px).
z-index:-10;
Le but de ceci est de créer le div entier en dessous de chaque niveau dans la page HTML. Dans des circonstances normales, la valeur de l'index z du premier niveau créé est 0, donc si nous écrivons -1 ici, c'est bien l'implémentation, mais écrire -10 ici c'est pour s'assurer que l'ensemble du div est en bas, car s'il y a trop de niveaux dans la page, parfois -1 n'est pas nécessairement en bas, mais cela n'a pas de sens. s'il est écrit sous la forme d'un grand nombre comme -100. Utilisez index:-10 pour obtenir ce qui ressemble à une image d'arrière-plan. Il s'agit en fait du div 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 phrases ci-dessus ont la même signification, qui est de rendre l'image redimensionnée de manière synchrone avec la taille de l'écran, mais certaines parties peut être recadré, mais il ne sera pas exposé, les deux phrases suivantes concernent 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.
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!