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

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

php中世界最好的语言

Libérer： 2018-03-13 11:46:22

original

1886 Les gens l'ont consulté

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;

Copier après la connexion

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 et à la hauteur 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 ( garantit uniquement qu'un côté est rempli de )

background-size

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

background-origin : 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位置开始

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

4. Plusieurs images d'arrière-plan

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

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;

Copier après la connexion

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;

Copier après la connexion

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;

Copier après la connexion

115-多重背景图片

Copier après la connexion

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 !

<a>先添加的背景图片会盖住后添加的背景图片</a>
<html lang="en"> <head>     <meta charset="UTF-8">     <title>116-多重背景图片-练习</title>     <style>         *{             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;             }         }     </style> </head> <body> <p></p> </body> </html>

Copier après la connexion

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!