Maison > Article > développement back-end > Comment étirer l'image d'arrière-plan CSS à 100 % et définir l'affichage plein écran
Comment étirer l'image d'arrière-plan CSS à 100 % et définir l'affichage plein écran
- 不言original
- 2018-03-30 11:06:2811892parcourir
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='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></p>Recommandations associées :
<.>
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!
Articles Liés
Voir plus- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Tous les symboles d'expression dans les expressions régulières (résumé)