Maison > Article > interface Web > CSS implémente une image d'arrière-plan plein écran réactive
CSS implémente une image d'arrière-plan plein écran réactive
- 巴扎黑original
- 2017-05-27 17:24:362630parcourir
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> 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;
}La plus importante ci-dessus est :
background-size: cover;
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;
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;
(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);
}
}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!