css背景的一些小常識

一.如何設定標籤的背景顏色
#在css中有一個background-color:屬性，就是專門用來設定背景顏色的

取值：
#具體的單字
rgb
rgba

十六進位

二.如何設定背景圖片？
在css中有一個叫做background-image的屬性，就是專門用來設定背景圖片的

注意點：
1.圖片的位址必須放在url()中，圖片的位址可以是本地的位址，也可以是網路的位址
2.如果圖片的大小沒有標籤大，那麼會自動在水平和垂直方向平鋪和填充
3.如果網頁上出現了圖片，那麼瀏覽器會再次發送請求來獲取圖片

#三.如何控制背景圖片的平鋪方式？
在css中有一個background-repeat屬性，就是專門用來控制背景圖片的平鋪方式的

取值：
repeat 默認，在水平和垂直方向都平鋪
no-repeat 在水平和垂直方向都不平鋪
repeat-x 在水平方向平鋪
repeat-y 在垂直方向平鋪

應用場景：
可以透過背景圖片的平鋪來降低圖片的大小，提升網頁的存取速度

#四；如何控制背景圖片的位置？
在css中有一個background-position屬性，專門用來控制背景圖片位置

2.格式
background-position: 水平方向垂直方向;

3.取值
3.1具體的方位名詞
#水平方向：left center right
垂直方向：top center bottom

3.2具體的像素
例如：background-position: 100px 200px;
一定要寫單位，也就是px
具體的像素是接受負數的

注意點：
同一個標籤可以同時設定背景顏色和背景圖片，如果顏色和圖片同時存在，那麼圖片會覆蓋顏色

#

五.背景屬性縮寫的格式
background : 背景顏色背景圖片平鋪方式關聯方式定位方式;

2.注意點
background屬性中，任何一個屬性都可以省略

3.什麼是關聯方式？
預設背景圖片會隨著滾動條的滾動而滾動，如果不想讓背景圖片隨著滾動條的滾動而滾動，那麼我們就可以修改背景圖片和滾動條的關聯方式

4.如何修改背景的關聯方式？
在css中有一個background-attachment屬性專門修改背景的關聯方式

格式
background-attachment: scroll;
取值
scroll 預設值，會隨著捲軸的捲動而捲動
##fixed 不會隨著捲動條的滾動而滾動
#

以上是css背景的一些小常識的詳細內容。更多資訊請關注PHP中文網其他相關文章！