溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中background屬性的特點(diǎn)是什么

發(fā)布時(shí)間:2022-03-02 11:15:49 來源:億速云 閱讀:106 作者:小新 欄目:web開發(fā)

小編給大家分享一下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è)資訊頻道,感謝各位的閱讀!

向AI問一下細(xì)節(jié)

免責(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)容。

AI