Maison > Article > interface Web > Attributs liés à l'arrière-plan en HTML et CSS

Attributs liés à l'arrière-plan en HTML et CSS

php中世界最好的语言original: 2018-03-13 11:46:221807parcourir

Cette fois, je vais vous présenter les attributs liés à l'arrière-plan en HTML et CSS. Quelles sont les précautions à prendre pour utiliser les attributs liés à l'arrière-plan en HTML et CSS ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Attribut de taille d'arrière-plan

1. Qu'est-ce que l'attribut de taille d'arrière-plan
L'attribut de taille d'arrière-plan est un nouvel attribut en CSS3, spécifiquement utilisé pour définir la taille des images d'arrière-plan

background-size:xxxx;

Valeur :

1.具体像素 >> background-size:200px 100px;
2.百分比 >> background-size:100% 80%;
3.宽度等比拉伸 >> background-size:auto 100px;
4.高度等比拉伸 >> background-size:100px auto;
5.cover >> background-size:cover;

5.1 Indiquez au système que l'image doit être étirée proportionnellement

5.2 Indiquer au système L'image doit être étirée à la largeur 3499910bf9dac5ae3c52d5ede7383485 et à la hauteur 5db79b134e9f6b82c0b36e0489ee08ed pour remplir l'élément

6. >

6.1 Indiquer au système que l'image doit être étirée proportionnellement

6.2 Indiquer au système que l'image doit être étirée pour remplir l'élément avec une largeur 3499910bf9dac5ae3c52d5ede7383485 (3499910bf9dac5ae3c52d5ede7383485 garantit uniquement qu'un côté est rempli de 5db79b134e9f6b82c0b36e0489ee08ed )

background-size

2. Attribut de zone de positionnement de l'image d'arrière-plan

background-origin5db79b134e9f6b82c0b36e0489ee08ed : indique au système la zone à partir de laquelle l'image d'arrière-plan commence à être affichée. Par défaut, elle commence à partir de la zone de remplissage

; 🎜>

1.<a>padding-box</a>:默认值 >>background-origin: padding-box; 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;
 2.<a>border-box</a> >>  background-origin:border-box; 从border位置开始
 3.<a>content-box</a> >>  background-origin:content-box;从content位置开始

Attribut de zone de positionnement de l'image d'arrière-plan

<html lang="en"> <head>     <meta charset="UTF-8">     <title>113-背景图片定位区域属性</title>     <style>         *{             margin: 0;             padding: 0;         }         ul li{             list-style: none;             float: left;             width: 100px;             height: 100px;             text-align: center;             line-height: 100px;             border: 20px dashed #000;             padding: 50px;             margin-left: 20px;             background: url("images/dog.jpg") no-repeat;         }         ul li:nth-child(2){             /*             告诉系统背景图片从什么区域开始显示,             默认情况下就是从padding区域开始显示             */             background-origin: padding-box;         }         ul li:nth-child(3){             background-origin:border-box;         }         ul li:nth-child(4){             background-origin:content-box;         }     </style> </head> <body> <ul>     <li>默认</li>     <li>padding</li>     <li>border</li>     <li>content</li> </ul> </body> </html>

3. Attributs de la zone de dessin d'arrière-plan

Attributs de la zone de dessin d'arrière-plan (le rouge est la zone de dessin )

<a>background-clip:xxx;</a>背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
<html lang="en"> <head>     <meta charset="UTF-8">     <title>114-背景绘制区域属性</title>     <style>         *{             margin: 0;             padding: 0;         }         ul li{             list-style: none;             float: left;             width: 100px;             height: 100px;             text-align: center;             line-height: 100px;             border: 20px dashed #000;             padding: 50px;             margin-left: 20px;             background: red url("images/dog.jpg") no-repeat;         }         ul li:nth-child(2){             /*             背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景             */             background-clip: padding-box;         }         ul li:nth-child(3){             background-clip: border-box;         }         ul li:nth-child(4){             background-clip: content-box;         }     </style> </head> <body> <ul>     <li>默认</li>     <li>padding</li>     <li>border</li>     <li>content</li> </ul> </body> </html>

4. Plusieurs images d'arrière-plan

3499910bf9dac5ae3c52d5ede7383485L'image d'arrière-plan ajoutée en premier couvrira l'image d'arrière-plan ajoutée plus tard5db79b134e9f6b82c0b36e0489ee08ed

Après l'élément c3. , plusieurs images d'arrière-plan peuvent être définies

Plusieurs images d'arrière-plan peuvent être séparées par des virgules

Remarque :

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom;

L'image d'arrière-plan ajoutée en premier couvrira l'image d'arrière-plan ajoutée plus tard

Il est recommandé de les séparer lors de l'écriture de plusieurs arrière-plans Commencez à écrire

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;

Le code complet est le suivant :

background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: left top, right top, left bottom;

9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e     a80eb7cbb6fff8b0ff70bae37074b813     b2386ffb911b14667cb8f0f91ea547a7115-多重背景图片6e916e0f7d1e588d4f442bf645aedb2f     c9ccee2e6ea535a969eb3f532ad9fe89         *{             margin: 0;             padding: 0;         }         p{             width: 500px;             height: 500px;             border: 1px solid #000;             margin: 0 auto;             /*             多张背景图片之间用逗号隔开即可             注意点:             先添加的背景图片会盖住后添加的背景图片             建议在编写多重背景时拆开编写             */             /*background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;*/             background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");             background-repeat: no-repeat, no-repeat, no-repeat;             background-position: left top, right top, left bottom;         }     531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e

Multiple images d'arrière-plan

4. Contact avec plusieurs images d'arrière-plan

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

3499910bf9dac5ae3c52d5ede7383485先添加的背景图片会盖住后添加的背景图片5db79b134e9f6b82c0b36e0489ee08ed
9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e     a80eb7cbb6fff8b0ff70bae37074b813     b2386ffb911b14667cb8f0f91ea547a7116-多重背景图片-练习6e916e0f7d1e588d4f442bf645aedb2f     c9ccee2e6ea535a969eb3f532ad9fe89         *{             margin: 0;             padding: 0;         }         p{             width: 600px;             height: 190px;             border: 1px solid #000;             margin: 100px auto;                       background-image: url("images/bg-plane.png"),url("images/bg-sun.png"), url(images/bg-clouds.png);             background-repeat: no-repeat, no-repeat, no-repeat;             background-size: 50px 50px, 50px 50px, auto auto;          background-position: 50px 150px, 400px 50px, 0px 0px;             animation: move 10s linear 0s infinite normal;         }         @keyframes move {             from{                 background-position: 50px 150px, 400px 50px, 0px 0px;             }             to{                 background-position: 500px -150px, 400px 50px, -600px 0px;             }         }     531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e

Lecture recommandée :

Module de conversion 2D en HTML et CSS

Module de transition en HTML et CSS

Positionnement en H5

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：Module de conversion 3D en HTML et CSSArticle suivant：Module de conversion 3D en HTML et CSS

Articles Liés

Voir plus