您好,登錄后才能下訂單哦!
小編給大家分享一下css中background屬性的特點(diǎn)是什么,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
簡(jiǎn)寫順序:color-image-repeat-attachment-position
eg:body{background:#ffffffurl('img.png')no-repeatrighttop}
下來按順序介紹每個(gè)屬性特點(diǎn):
一、background-color:red;#ffffff;rgb(255,255,255);
三種顏色表示方法,分別是顏色名,十六進(jìn)制和RGB;可以為所有元素設(shè)置背景色;默認(rèn)透明。
二、background-image:url(‘img.jpg’)
圖片地址可以是相對(duì)路徑也可以是絕對(duì)路徑;默認(rèn)平鋪重復(fù)顯示;
三、background-repeat:repeat-x;repeat-y;no-repeat;
默認(rèn)平鋪重復(fù)顯示;
四、background-attachment:scroll;fixed;local;inherit;
background-attachment的意思是指背景圖像是否固定或者隨著頁面的其余部分滾動(dòng);默認(rèn)scroll;
scroll是指背景圖片隨著頁面其余部分滾動(dòng);fixed為固定;inherit是從父元素繼承;local是隨滾動(dòng)元素滾動(dòng)。
五、background-position:bottomcenter;top;66%33%;50px100px;
4種表示法:一是top,left,bottom,right,center組合;二是一個(gè)值,系統(tǒng)默認(rèn)為center;三是百分比;四是直接寫像素。
后兩種精確度高。
六、background-clip:border-box;padding-box;content-box;規(guī)定背景圖的繪制區(qū)域。
七、background-origin:border-box;padding-box;content-box;規(guī)定背景圖的定位區(qū)域。
注意:如果背景圖像background-attachment是“固定”,這個(gè)屬性沒有任何效果。
八、background-size:auto(默認(rèn));length(兩個(gè)值,一個(gè)寬一個(gè)高,一個(gè)值的話默認(rèn)第二個(gè)是auto);percentage(賦值原理同length);cover(此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大?。?contain(此時(shí)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最小大小);
看完了這篇文章,相信你對(duì)“css中background屬性的特點(diǎn)是什么”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。