HTML與CSS中背景相關(guān)屬性有哪些
HTML與CSS中背景相關(guān)屬性有哪些？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
成都創(chuàng)新互聯(lián)長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為萬載企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站，萬載網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
一. 背景尺寸屬性
1.什么是背景尺寸屬性
背景尺寸屬性是CSS3中新增的一個(gè)屬性, 專門用于設(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)圖片需要拉伸到寬度和高度都填滿元素
6. contain >> background-size:contain;
6.1告訴系統(tǒng)圖片需要等比拉伸
6.2告訴系統(tǒng)圖片需要拉伸到寬度或高度都填滿元素(只保證一邊填滿)
background-size
二. 背景圖片定位區(qū)域?qū)傩?/p>
background-origin : 告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示,默認(rèn)情況下就是從padding區(qū)域開始顯示;
取值:
1.padding-box:默認(rèn)值 >>background-origin: padding-box; 告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示,默認(rèn)情況下就是從padding區(qū)域開始顯示; 2.border-box >> background-origin:border-box; 從border位置開始 3.content-box >> background-origin:content-box;從content位置開始
113-背景圖片定位區(qū)域?qū)傩?/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ū)域開始顯示, 默認(rèn)情況下就是從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>默認(rèn)</li> <li>padding</li> <li>border</li> <li>content</li> </ul> </body> </html></pre><p>背景圖片定位區(qū)域?qū)傩?/p><p>三. 背景繪制區(qū)域?qū)傩?/p><pre><a>background-clip:xxx;</a>背景繪制區(qū)域?qū)傩允菍ｉT用于指定從哪個(gè)區(qū)域開始繪制背景的, 默認(rèn)情況下會(huì)從border區(qū)域開始繪制背景 <html lang="en"> <head> <meta charset="UTF-8"> <title>114-背景繪制區(qū)域?qū)傩?/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ū)傩允菍ｉT用于指定從哪個(gè)區(qū)域開始繪制背景的, 默認(rèn)情況下會(huì)從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>默認(rèn)</li> <li>padding</li> <li>border</li> <li>content</li> </ul> </body> </html></pre><p>背景繪制區(qū)域?qū)傩?紅色為繪制區(qū)域)</p><p>四. 多重背景圖片</p><p><a>先添加的背景圖片會(huì)蓋住后添加的背景圖片</a></p><p>元素c3之后可以設(shè)置多張背景圖片<br/>多張背景圖片之間用逗號(hào)隔開即可</p><pre>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;</pre><p>注意點(diǎn):</p><p>先添加的背景圖片會(huì)蓋住后添加的背景圖片</p><pre>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;</pre><p>建議在編寫多重背景時(shí)拆開編寫</p><pre>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;</pre><p>完整代碼如下:</p><pre><html lang="en"> <head> <meta charset="UTF-8"> <title>115-多重背景圖片
多重背景圖片
四.多重背景圖片聯(lián)系
先添加的背景圖片會(huì)蓋住后添加的背景圖片116-多重背景圖片-練習(xí)
關(guān)于HTML與CSS中背景相關(guān)屬性有哪些問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
當(dāng)前名稱：HTML與CSS中背景相關(guān)屬性有哪些
轉(zhuǎn)載源于：http://m.jiaotiyi.com/article/jcjesd.html