Heim >Web-Frontend >HTML-Tutorial >Hintergrundbezogene Attribute in HTML und CSS
Hintergrundbezogene Attribute in HTML und CSS
- php中世界最好的语言Original
- 2018-03-13 11:46:221904Durchsuche
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 5db79b134e9f6b82c0b36e0489ee08ed 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 3499910bf9dac5ae3c52d5ede7383485 gefüllt werden muss (3499910bf9dac5ae3c52d5ede7383485 stellt nur sicher, dass eine Seite mit 5db79b134e9f6b82c0b36e0489ee08ed 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>Attribut des Hintergrund-Zeichenbereichs
<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>Attribute des Hintergrund-Zeichenbereichs (rot ist der Zeichenbereich). )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!
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 73a6ac4ed44ffec12cee46588e518a5eEmpfohlene Lektüre:
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!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：3D-Konvertierungsmodul in HTML und CSSNächster Artikel：3D-Konvertierungsmodul in HTML und CSS