Dieses Mal werde ich Ihnen die Hintergrundattribute in HTML und CSS vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung der Hintergrundattribute in HTML und CSS? Das Folgende ist ein praktischer Fall, schauen wir uns das an.
1. Hintergrundgrößenattribut
1. Was ist das Hintergrundgrößenattribut?
Das Hintergrundgrößenattribut ist ein neues Attribut in CSS3, das speziell zum Festlegen der Größe von Hintergrundbildern verwendet wird
Hintergrundgröße:xxxx;
Wert:
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 Teilen Sie dem System mit, dass das Bild proportional gestreckt werden muss
5.2 Teilen Sie dem System mit, dass das Bild auf die Breite gestreckt werden muss, um das Element
6 zu füllen >
6.1 Teilen Sie dem System mit, dass das Bild proportional gestreckt werden muss 6.2 Teilen Sie dem System mit, dass das Bild mit der Breite gefüllt werden muss ( stellt nur sicher, dass eine Seite mit gefüllt ist)Hintergrundgröße2. Attribut für den Positionierungsbereich des Hintergrundbilds1.<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位置开始
<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>
<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>Mehrere Hintergrundbilder können durch Kommas getrennt werden
Hinweis:
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;Das zuerst hinzugefügte Hintergrundbild überdeckt das später hinzugefügte Hintergrundbild
Es wird empfohlen, sie zu trennen, wenn Sie mehrere Hintergründe schreiben. Beginnen Sie mit dem Schreiben
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;Der vollständige Code lautet wie folgt:
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;115-多重背景图片
4. Mehrere Hintergrundbilder kontaktieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
<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>2D-Konvertierungsmodul in HTML und CSS
Übergangsmodul in HTML und CSS
Das obige ist der detaillierte Inhalt vonHintergrundbezogene Attribute in HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
