前端知識(shí)設(shè)置元素的背景

background-color

background-color屬性用來為元素設(shè)置背 景顏色。
需要指定一個(gè)顏色值,當(dāng)指定了一個(gè)顏色 以后,整個(gè)元素的可見區(qū)域都會(huì)使用這個(gè) 顏色作為背景色。
如果不設(shè)置背景顏色,元素默認(rèn)背景顏色 為透明,實(shí)際上會(huì)顯示父元素的背景顏色。

background-image

background-image可以為元素指定背景 圖片。
和background-color類似,這不過這里使 用的是一個(gè)圖片作為背景。
需要一個(gè)url地址作為參數(shù),url地址需要指 向一個(gè)外部圖片的路徑
例如:
background-image: url(1.jpg)

background-repeat

background-repeat用于控制背景圖片的 重復(fù)方式。
如果只設(shè)置背景圖片默認(rèn)背景圖片將會(huì)使 用平鋪的方式,可以通過該屬性進(jìn)行修改。
可選值:
repeat:默認(rèn)值,圖片左右上下平鋪
no-repeat:只顯示圖片一次,不會(huì)平鋪
repeat-x:沿x軸水平平鋪一張圖片
repeat-y:沿y軸水平平鋪一張圖片

background-position

background-position用來精確控制背景 圖片在元素中的位置。
可以通過三種方式來確定圖片在水平方向 和垂直方向的起點(diǎn)。
關(guān)鍵字:top right bottom left center
百分比
數(shù)值

background-attachment

background-attachment用來設(shè)置背景圖 片是否隨頁面滾動(dòng)。
可選值:
scroll:隨頁面滾動(dòng)
fixed:不隨頁面滾動(dòng)

background

background是背景的簡(jiǎn)寫屬性,通過這個(gè) 屬性可以一次性設(shè)置多個(gè)樣式,而且樣式 的順序沒有要求。
例如:
background: green url(1.jpg) no-repeat center center fixed;

CSS Sprite

CSS Sprites是一種網(wǎng)頁圖片應(yīng)用處理方式。
通過這種方式我們可以將網(wǎng)頁中的零星圖 片集中放到一張大圖上。
這樣一來,一次請(qǐng)求便可以同時(shí)加載多張 圖片,大大提高了圖片的加載效率。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容