Comment étirer l'image d'arrière-plan CSS à 100 % et définir l'affichage plein écran-tutoriel php-php.cn

Comment étirer l'image d'arrière-plan CSS à 100 % et définir l'affichage plein écran

不言

Libérer： 2023-03-22 18:14:02

original

11910 Les gens l'ont consulté

De nos jours, l'utilisation du CSS est également très importante pour de nombreux utilisateurs. Il peut très bien étirer les images sans laisser de traces. Cet article vous expliquera comment étirer les images d'arrière-plan CSS pour configurer 100 % en plein écran. Affichage, les amis dans le besoin peuvent s'y référer.

De nos jours, l’utilisation du CSS est également très importante pour de nombreux utilisateurs. Il permet d’étirer très bien les images sans laisser de traces. Alors, lorsque nous utilisons CSS, que devons-nous faire si l'image d'arrière-plan est étirée à 100 % et affichée en plein écran ? Quel est le code spécifique ?

Comment utiliser l'image d'arrière-plan CSS pour l'étendre à un affichage plein écran à 100 % ? Cette question peut paraître simple. Mais je suis désolé de vous le dire. Ce n'est pas aussi simple qu'on le pense.

Par exemple, définissez un arrière-plan dans un conteneur (body, p, span). La longueur et la largeur de ce fond ne peuvent pas être modifiées avant CSS2.1.

Par conséquent, le résultat réel ne peut être affiché que de manière répétée, de sorte que les attributs répétition, répétition-x, répétition-y et non-répétition apparaissent. Il est utilisé pour contrôler l’affichage des images d’arrière-plan. Il existe donc généralement deux types d’images de fond :

1. Il s'agit d'une grande image et la taille correspond exactement à la taille de la zone

2. Un très petit graphique à barres, après répétition, forme un grand fond d'image très régulier.

Mais après l’émergence de CSS3, cette situation s’est améliorée. La propriété de taille d'arrière-plan peut réaliser nos souhaits antérieurs.

Et cette propriété peut être utilisée sur Firefox, Chrome et ie9.
L'utilisation spécifique est la suivante :
Taille de l'image d'arrière-plan (représentation numérique) :

Le code est le suivant :

#background-size{

taille de l'arrière-plan : 200px 100px ;

Taille de l'image d'arrière-plan (en pourcentage) :

Le code est le suivant :

#background-size2{

background-size:30% 60%;

Taille de l'image d'arrière-plan (agrandissez l'image proportionnellement pour remplir l'élément, c'est-à-dire la valeur de couverture) :

Le code est le suivant :

#background-size3{

taille d'arrière-plan : couverture ;

Taille de l'image d'arrière-plan (réduire l'image proportionnellement pour l'adapter à la taille de l'élément, c'est-à-dire la valeur contenue) :

Le code est le suivant :

#background-siz

e4{

taille d'arrière-plan:contenir;

Taille de l'image d'arrière-plan (remplissez l'élément avec la propre taille de l'image, c'est-à-dire la valeur automatique) :

Le code est le suivant :

#background-size5{

taille d'arrière-plan : auto;

<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
</head>
<style>
#bgvid1{
width:100%;
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
height: auto;
z-index: -100;
background-size: cover;
}
</style>
<body>
<img id="bgvid1" src="/uploads/common/veryhuo.gif">
</body>
</html>
<p style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href=&#39;http://www.veryhuo.com/&#39; target=&#39;_blank&#39;>http://www.veryhuo.com/</a></p>

Copier après la connexion

Recommandations associées :

Quelle devrait être la taille appropriée pour les images d'arrière-plan CSS de tuiles répétées ? _html/css_WEB-ITnose

Laisser beaucoup de transparence dans l'image d'arrière-plan CSS affectera-t-il la page Web ? _html/css_WEB-ITnose

l'image d'arrière-plan CSS est chargée en premier, puis rendue. J'espère que tout le monde jettera un œil à _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!