Maison > Article > interface Web > 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:308361parcourir

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

Implémentation JS de la création d'une image d'arrière-plan de page Web Méthode de déplacement en diagonale_javascript skills

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!

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：Explication détaillée de la nouvelle utilisation des sélecteurs CSSArticle suivant：Explication détaillée de la nouvelle utilisation des sélecteurs CSS

Articles Liés

Voir plus