CSS implémente une image d'arrière-plan plein écran réactive-tutoriel CSS-php.cn

CSS implémente une image d'arrière-plan plein écran réactive

巴扎黑

Libérer： 2017-05-27 17:24:36

original

2614 Les gens l'ont consulté

CSS implémente une image d'arrière-plan plein écran réactive

L'un des formats de page Web les plus populaires actuellement est celui des grandes images en plein écran. Cet article utilisera le moyen le plus simple pour obtenir cet effet. La propriété CSS background-size est utilisée ,aucun javascript requis.

Concepts de base

Utilisez l'attribut background-size pour remplir toute la fenêtre d'affichage

Lorsque la valeur de l'attribut CSS background-size est cover, le navigateur redimensionnera automatiquement la largeur et la hauteur de l'image d'arrière-plan proportionnellement jusqu'à ce qu'elle soit supérieure ou égale à la largeur et à la hauteur de l'image d'arrière-plan. viewport

Utiliser les requêtes multimédias pour fournir des images d'arrière-plan de plus petite taille pour les appareils mobiles

Pourquoi fournir un arrière-plan de petite taille images pour appareils mobiles ? Dans la démo, la taille réelle de l'image d'arrière-plan que nous voyons est de 5498px * 3615px, le but de l'utilisation d'une image de si grande taille est de satisfaire la plupart des moniteurs grand écran sans affichage flou, au détriment d'une taille d'image de 1,7 Mo.

Mais il n'est pas nécessaire d'utiliser des images aussi volumineuses sur les appareils mobiles. En même temps, les images volumineuses entraîneront un chargement plus lent, en particulier sur les réseaux mobiles.

Il est à noter que la fourniture d'une petite image de fond pour les appareils mobiles est facultative pour cette solution technique.

Pratique

HTML

<!doctype html>
<html>
<body>
    ...Your content goes here...
</body>
</html>

Copier après la connexion

Plus tard, nous spécifierons une image d'arrière-plan pour la balise body, afin que l'image d'arrière-plan puisse remplir toute la fenêtre d'affichage du navigateur.

En fait, cette solution peut être efficace pour tous les conteneurs au niveau bloc. Si la largeur et la hauteur de votre conteneur au niveau du bloc sont dynamiques, l'image d'arrière-plan s'agrandira et se contractera automatiquement pour remplir tout le conteneur.

Le style de la balise body CSS est le suivant :

body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);

/* 背景图垂直、水平均居中 */
background-position: center center;

/* 背景图不平铺 */
background-repeat: no-repeat;

/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;

/* 让背景图基于容器大小伸缩 */
background-size: cover;

/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #**46;
}

Copier après la connexion

La plus importante ci-dessus est :

background-size: cover;

Copier après la connexion

De cette façon, le navigateur redimensionnera l'image d'arrière-plan proportionnellement jusqu'à ce que la largeur et la hauteur de l'image d'arrière-plan ne soient pas inférieures à la largeur et à la hauteur du conteneur (dans l'exemple ci-dessus , la balise body).

Une chose à noter ici est que si l'image d'arrière-plan est plus petite que la taille de la balise body (par exemple, sur un écran haute résolution, ou lorsque le contenu de la page est particulièrement volumineux), le navigateur étirera l'image. Nous savons tous que lorsqu’une image est étirée, elle devient floue.

Par conséquent, lors du choix d’une image d’arrière-plan, portez une attention particulière à la taille. Afin de prendre en compte la grande taille de l'écran, la taille de l'image utilisée dans la démo est de 5498px * 3615px.

En même temps, afin de garder l'image d'arrière-plan toujours centrée par rapport à la fenêtre d'affichage, nous déclarons :

background-position: center center;

Copier après la connexion

Les règles ci-dessus positionneront l'origine de la mise à l'échelle de l'image d'arrière-plan à le centre de la fenêtre.

Le prochain problème que nous devons résoudre est le suivant : lorsque la hauteur du contenu est supérieure à la hauteur de la fenêtre, une barre de défilement apparaît. Nous voulons que l'image d'arrière-plan reste fixe par rapport à la fenêtre, même lorsque l'utilisateur fait défiler.

La solution est :

background-attachment: fixed;

Copier après la connexion

(Facultatif) Utilisez des requêtes multimédias pour gérer les petits écrans

Afin de faire face au petit écran, j'ai utilisé Photoshop pour redimensionner l'image d'arrière-plan à 768px * 505px, puis j'ai utilisé smush.it Compresser la taille de l'image. Cela réduit la taille de l'image de 1 741 Ko à 114 Ko, soit une économie de 93 %.

Voici comment la requête multimédia est écrite :

@media only screen and (max-width: 767px) {
  body {
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

Copier après la connexion

La requête multimédia ci-dessus aura une largeur maximale : 767px Défini comme point d'arrêt, ce qui signifie que lorsque la fenêtre d'affichage du navigateur est supérieure à 767 pixels, une grande image d'arrière-plan sera utilisée, sinon une petite image d'arrière-plan sera utilisée.

L'inconvénient de l'utilisation de la requête multimédia ci-dessus est que si vous réduisez la fenêtre du navigateur de 1 200 px à 640 px (ou vice versa), vous verrez un bref scintillement pendant le chargement de la petite ou de la grande image d'arrière-plan.

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!