一. 背景尺寸屬性

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)圖片需要拉伸到寬度 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ū)域開始顯示,默認(rèn)情況下就是從padding區(qū)域開始顯示;

取值:

1. a padding-box /a :默認(rèn)值 background-origin: padding-box; 告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示,默認(rèn)情況下就是從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ū)傩?/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 

背景圖片定位區(qū)域?qū)傩?br>

三. 背景繪制區(qū)域?qū)傩?/p>

 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 

背景繪制區(qū)域?qū)傩?紅色為繪制區(qū)域)

四. 多重背景圖片

a 先添加的背景圖片會(huì)蓋住后添加的背景圖片 /a

元素c3之后可以設(shè)置多張背景圖片
多張背景圖片之間用逗號(hào)隔開即可

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;

注意點(diǎn):

先添加的背景圖片會(huì)蓋住后添加的背景圖片

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;

建議在編寫多重背景時(shí)拆開編寫

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; /* 多張背景圖片之間用逗號(hào)隔開即可 注意點(diǎn): 先添加的背景圖片會(huì)蓋住后添加的背景圖片 建議在編寫多重背景時(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,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 先添加的背景圖片會(huì)蓋住后添加的背景圖片 /a  html lang= en head meta charset= UTF-8 title 116-多重背景圖片-練習(xí) /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 

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php 其它相關(guān)文章！

推薦閱讀：

HTML與CSS中2D轉(zhuǎn)換模塊

HTML與CSS中的過渡模塊

H5中的定位

以上就是HTML與CSS中背景相關(guān)屬性的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。