小編給大家分享一下HTML與CSS中背景相關屬性怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯公司自2013年起，先為吳橋等服務建站，吳橋等地企業(yè)，進行企業(yè)商務咨詢服務。為吳橋企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

一.背景尺寸屬性

1.什么是背景尺寸屬性

背景尺寸屬性是CSS3中新增的一個屬性,專門用于設置背景圖片大小

background-size:xxxx;

取值:

1.具體像素>>background-size:200px100px;

2.百分比>>background-size:100%80%;

3.寬度等比拉伸>>background-size:auto100px;

4.高度等比拉伸>>background-size:100pxauto;

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ū)域屬性

background-origin:告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示,默認情況下就是從padding區(qū)域開始顯示;

取值:

1.padding-box:默認值>>background-origin:padding-box;告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示,默認情況下就是從padding區(qū)域開始顯示;

2.border-box>>background-origin:border-box;從border位置開始

3.content-box>>background-origin:content-box;從content位置開始

• 默認
• padding
• border
• content

背景圖片定位區(qū)域屬性

三.背景繪制區(qū)域屬性

background-clip:xxx;背景繪制區(qū)域屬性是專門用于指定從哪個區(qū)域開始繪制背景的,默認情況下會從border區(qū)域開始繪制背景

• 默認
• padding
• border
• content

背景繪制區(qū)域屬性(紅色為繪制區(qū)域)

四.多重背景圖片

先添加的背景圖片會蓋住后添加的背景圖片

元素c3之后可以設置多張背景圖片

多張背景圖片之間用逗號隔開即可

background:url("images/animal1.png")no-repeatlefttop,url("images/animal2.png")no-repeatrighttop,url("images/animal3.png")no-repeatleftbottom;

注意點:

先添加的背景圖片會蓋住后添加的背景圖片

background:url("images/animal1.png")no-repeatlefttop,url("images/animal2.png")no-repeatrighttop,url("images/animal3.png")no-repeatleftbottom,url("images/animal4.png")no-repeatrightbottom,url("images/animal5.png")no-repeatcentercenter;

建議在編寫多重背景時拆開編寫

background-image:url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");background-repeat:no-repeat,no-repeat,no-repeat;background-position:lefttop,righttop,leftbottom;

完整代碼如下:

多重背景圖片

四.多重背景圖片聯系

先添加的背景圖片會蓋住后添加的背景圖片

以上是“HTML與CSS中背景相關屬性怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道！