溫馨提示×

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

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

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

發(fā)布時(shí)間:2021-01-25 10:51:48 來(lái)源:億速云 閱讀:157 作者:小新 欄目:web開(kāi)發(fā)

小編給大家分享一下css中background屬性特點(diǎn)是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

簡(jiǎn)寫(xiě)順序:color-image-repeat-attachment-position

eg:body{background:#ffffff url('img.png') no-repeat right top}

下來(lái)按順序介紹每個(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的意思是指背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng);默認(rèn)scroll;

scroll是指背景圖片隨著頁(yè)面其余部分滾動(dòng);fixed為固定;inherit是從父元素繼承;local是隨滾動(dòng)元素滾動(dòng)。

五、background-position:bottom center;top;66% 33%;50px 100px;

4種表示法:一是top,left,bottom,right,center組合;二是一個(gè)值,系統(tǒng)默認(rèn)為center;三是百分比;四是直接寫(xiě)像素。

后兩種精確度高。

六、background-clip:border-box;padding-box;content-box;規(guī)定背景圖的繪制區(qū)域。

七、background-origin:border-box;padding-box;content-box;規(guī)定背景圖的定位區(qū)域。

注意:如果背景圖像background-attachment是“固定”,這個(gè)屬性沒(méi)有任何效果。

八、background-size:auto(默認(rèn));length(兩個(gè)值,一個(gè)寬一個(gè)高,一個(gè)值的話默認(rèn)第二個(gè)是auto);percentage(賦值原理同length);cover(此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大?。?contain(此時(shí)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最小大?。?

以上是“css中background屬性特點(diǎn)是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問(wèn)一下細(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