目錄
1、設定背景顏色
2、設定背景影象
3、背景與不透明度的設定
4、設定背景影象平鋪
5、設定背景影象的位置
6、設定背景影象固定
7、設定背景影象的大小
8、設定背景的顯示區域
9、設定背景影象的裁剪區域
10、設定多重背景影象
11、線性漸變
12、重複漸變
background-color可以設定網頁的顏色,預設值為transparent,即背景透明,此時子元素會顯示其父元素的背景。
background-image
rgba(r,g,b,alpha)也可以設定不透明引數
opacity能夠使任何元素呈現出透明效果
預設情況下,背景影象會自動沿著水平和垂直兩個方向平鋪,如果不希望影象平鋪,或者只沿著乙個方向平鋪,可以通過background-repeat屬性來控制,該屬性的取值
body
如果將背景影象的平鋪屬性background-repeat定義為no-repeat,影象將預設以元素的左上角為基準點顯示。
如果希望背景圖固定在螢幕的某乙個位置,不隨著滾動條移動,可以使用background-attachment屬性來設定。
scroll:影象隨頁面元素一起滾動(預設值)
fixed:影象固定在螢幕上,不隨頁面元素滾動
background-size屬性用於控制背景影象的大小
屬性值說明
畫素值設定背景影象的高度和寬度,第乙個值設定寬度,第二個設定高度,如果只設定乙個值,第二個值會預設auto
百分比以父元素的百分比來設定背景影象的寬度和高度
cover
把背景影象擴充套件至足夠大,使背景影象完全覆蓋背景區域。背景影象的某些部分也許無法顯式在背景定位區域中
contain
把影象擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域
body
在預設情況下, background-position屬性總是以元素左上角為座標原點定位背景影象,background-origin屬性可以改變這種定位方式,自行定義背景影象的相對位置。
body
background-clip屬性用於定義背景影象的裁剪區域。
body
css3允許乙個容器裡顯示多個背景影象,是背景影象效果更容易控制。
通過background-image、background-repeat、background-position、background-size等屬性提供多個屬性值來實現多重背景影象效果,各屬性值之間用逗號隔開
body
css 盒子背景屬性
background 背景顏色 背景 背景平鋪 背景定位 背景滾動 注 沒有固定的順序,但是一般這樣寫 background image none url 路經 預設none background repeat repeat no repeat repeat x repeat y 預設repeat ...
css 背景 盒子模型 背景大小
背景 background color 背景顏色 十六進製制 rgbrgba a的取值0 1 background image 背景 url 位置 加 會有提示,不加沒有提示 background repeat 背景是否平鋪滿 no repeat 不平鋪滿 repeat x 在x軸平鋪滿 repea...
盒子模型的背景
三 精靈圖 雪碧圖 四 設定背景圖的大小 五 復合屬性background 背景顏色,缺省會填充盒子的內容區域,padding區域,邊框區域。並不會填充margin區域。background color 單詞 16進製制 rgb函式 rgba函式 transparent background ima...