設定行背景 CSS 背景 background

css 可以新增背景顏色和背景，以及來進行設定。

background-color 背景顏色

background-image 背景位址

background-repeat 是否平鋪

background-position 背景位置

background-attachment 背景固定還是滾動

背景的合寫(復合屬性) background:背景顏色 背景位址 背景平鋪 背景滾動 背景位置

背景(image)

語法：

background-image : none | url (url)

none : 　無背景圖(預設的)

url : 　使用絕對或相對位址指定背景影象

background-image 屬性允許指定乙個展示在背景中(只有css3才可以多背景)可以和 background-color 連用。 如果不重複地話，覆蓋不到地地方都會被背景色填充。 如果有背景平鋪，則會覆蓋背景顏色。

背景平鋪(repeat)

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat : 　背景影象在縱向和橫向上平鋪(預設的)

no-repeat : 　背景影象不平鋪

repeat-x : 　背景影象在橫向上平鋪

repeat-y : 　背景影象在縱向平鋪

設定背景時，預設把在水平和垂直方向平鋪以鋪滿整個元素。

repeat-x : 　背景影象在橫向上平鋪

repeat-y : 　背景影象在縱向平鋪

設定背景時，預設把在水平和垂直方向平鋪以鋪滿整個元素。

背景位置(position)

語法：

background-position : length || length​background-position : position || position

length : 　百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱長度單位

position : 　top | center | bottom | left | center | right

說明：

設定或檢索物件的背景影象位置。必須先指定background-image屬性。預設值為：(0% 0%)。

如果只指定了乙個值，該值將用於橫座標。縱座標將預設為50%。第二個值將用於縱座標。

注意：position 後面是x座標和y座標。 可以使用方位名詞或者 精確單位。

如果和精確單位和方位名字混合使用，則必須是x座標在前，y座標後面。比如 background-position: 15px top; 則 15px 一定是 x座標 top是 y座標。

實際工作用的最多的，就是背景居中對齊了。

背景附著

語法：

background-attachment : scroll | fixed

scroll : 　背景影象是隨物件內容滾動

fixed : 　背景影象固定

說明：

設定或檢索背景影象是隨物件內容滾動還是固定的。

背景簡寫

background:背景顏色 背景位址 背景平鋪 背景滾動 背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

background: rgba(0,0,0,0.3);

注意： 背景半透明是指盒子背景半透明， 盒子裡面的內容不收影響。

導航欄案例

使用技巧：在一行內的盒子內，我們設定行高等於盒子的高度，就可以使文字垂直居中。

設定行背景 CSS背景及應用

志同道合的小夥伴跟我一起學習交流哦！1 背景顏色及其平鋪 背景顏色background css可以新增背景顏色和背景，以及來進行設定。格式與用法如下 sublime小技巧 bgc tab background color 其他的以此類推 2 背景位置 一 背景位置position 語法 backgr...

css背景設定

顏色表示方法 background 1 red 英文單詞 2 ff0000 16進製制 3 rgb 255,0,0 3元色 4 rgb 100 0 0 百分比 背景起始位置 background origin padding box border box content box 邊框起始 內邊距起始...

css背景設定

1 background color 背景顏色 2 background image 背景 3 background repeat 背景重複 4 background position 背景位置 5 background size 背景尺寸 6 background attachment 背景粘附 ...