您好,登錄后才能下訂單哦!
HTML與CSS中背景相關(guān)屬性有哪些?針對這個問題,這篇文章詳細介紹了相對應的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
一. 背景尺寸屬性
1.什么是背景尺寸屬性
背景尺寸屬性是CSS3中新增的一個屬性, 專門用于設(shè)置背景圖片大小
background-size:xxxx;
取值:
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告訴系統(tǒng)圖片需要等比拉伸
5.2告訴系統(tǒng)圖片需要拉伸到寬度<a>和</a>高度都填滿元素
6. contain >> background-size:contain;
6.1告訴系統(tǒng)圖片需要等比拉伸
6.2告訴系統(tǒng)圖片需要拉伸到寬度<a>或</a>高度都填滿元素(<a>只保證一邊填滿</a>)
background-size
二. 背景圖片定位區(qū)域?qū)傩?/p>
<a>background-origin</a> : 告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示,默認情況下就是從padding區(qū)域開始顯示;
取值:
1.<a>padding-box</a>:默認值 >>background-origin: padding-box; 告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示,默認情況下就是從padding區(qū)域開始顯示; 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-背景圖片定位區(qū)域?qū)傩?lt;/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){ /* 告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示, 默認情況下就是從padding區(qū)域開始顯示 */ 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>
背景圖片定位區(qū)域?qū)傩?br/>
三. 背景繪制區(qū)域?qū)傩?/p>
<a>background-clip:xxx;</a>背景繪制區(qū)域?qū)傩允菍iT用于指定從哪個區(qū)域開始繪制背景的, 默認情況下會從border區(qū)域開始繪制背景 <html lang="en"> <head> <meta charset="UTF-8"> <title>114-背景繪制區(qū)域?qū)傩?lt;/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){ /* 背景繪制區(qū)域?qū)傩允菍iT用于指定從哪個區(qū)域開始繪制背景的, 默認情況下會從border區(qū)域開始繪制背景 */ 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>
背景繪制區(qū)域?qū)傩?紅色為繪制區(qū)域)
四. 多重背景圖片
<a>先添加的背景圖片會蓋住后添加的背景圖片</a>
元素c3之后可以設(shè)置多張背景圖片
多張背景圖片之間用逗號隔開即可
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;
注意點:
先添加的背景圖片會蓋住后添加的背景圖片
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;
完整代碼如下:
<html lang="en"> <head> <meta charset="UTF-8"> <title>115-多重背景圖片</title> <style> *{ 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; } </style> </head> <body> <p></p> </body> </html>
多重背景圖片
四.多重背景圖片聯(lián)系
<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>
關(guān)于HTML與CSS中背景相關(guān)屬性有哪些問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。