Comment adapter l'image d'arrière-plan CSS-tutoriel CSS-php.cn

Comment adapter l'image d'arrière-plan CSS

anonymity

Libérer： 2019-05-28 15:06:48

original

8581 Les gens l'ont consulté

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.

Comment adapter l'image d'arrière-plan CSS

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>

Copier après la connexion

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

Copier après la connexion

Ensuite, analysons la fonction de chaque ligne de code en CSS :

 position:fixed;  top: 0;  left: 0;

Copier après la connexion

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;

Copier après la connexion

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;

Copier après la connexion

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;

Copier après la connexion

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;

Copier après la connexion

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.