首頁 > web前端 > css教學 > css背景的一些小常識

css背景的一些小常識

零下一度
發布: 2017-05-02 13:33:59
原創
1755 人瀏覽過

一.如何設定標籤的背景顏色
#在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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板