css背景樣式有哪些

這篇文章主要介紹“css背景樣式有哪些”，在日常操作中，相信很多人在css背景樣式有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css背景樣式有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

css背景樣式包含：background-color、background-image、background-position、background-attachment、background-repeat、background。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。

1、background-color 設(shè)置元素的背景顏色。

background-color：顏色/transparent

說明：

• transparent是全透明

• 顏色值（顏色名/RGB/十六進(jìn)制）

背景區(qū)包括內(nèi)容、內(nèi)邊距（padding）和邊框（border）、不包含外邊距（margin）

2、background-image 設(shè)置元素的背景圖片。

background-image：url(圖片地址)/none

說明：

• url地址可以是相對地址也可以是絕對地址

• 元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距
  

• 默認(rèn)地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。
  

• 當(dāng)即設(shè)置了背景圖片又設(shè)置了背景顏色時(shí)，背景圖片會覆蓋背景顏色

3、background-position 設(shè)置背景圖片的起始位置，背景定位

background-position ：百分比/px/top/right/bottom/left/center

4、background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動

background-attachment：scroll/fixed

• scroll： 默認(rèn)值，隨著圖片的滾動而滾動

• fixed：當(dāng)頁面的其余部分滾動時(shí)，背景圖片不會移動

5、background-repeat 設(shè)置背景圖像是否重復(fù)及如何重復(fù)

background-repeat：repeat/no-repeat/repeat-x/repeat-y 

//分別是重復(fù)、不重復(fù)、水平重復(fù)、不重復(fù)

6、background 簡寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。

background：[background-color] [background-image] [background-repeat] [background-attachment] [background-position]

說明：各值之間用空格分割，不分先后順序

到此，關(guān)于“css背景樣式有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！