div css 背景樣式background屬性
一、語法及參數
1、語法:
background : background-color(顏色) || background-image(圖片地址) || background-repeat(平鋪方式) || background-attachment(固定方式) || background-position(定位大小)
2、background參數:
background屬性是復合屬性。通俗說background后值可以設置為多值,包括背景顏色,背景圖片等等,以及位置和平鋪方式的更改等等。
二、background寫法
1、整體寫
background:url(圖片地址) no-repeat 20px 20px;
2、分開寫
就需要用到background-image:url(圖片地址);background-repeat(平鋪方式) background-position(定位)
三、background詳解分析
css background背景樣式結構分析
上面(二)中的css進行一個詳細的說明
1>url我就不說了沒什么可以說的
2>平鋪方式
repeat:默認的,背景圖像將在垂直方向和水平方向重復。
repeat-x:背景圖像將在水平方向重復,當然y的話就是垂直了
no-repeat:圖片顯示一次
inherit:簡單來說的話就是繼承父元素的
3>定位
上面的20px 20px分別代表的意思是 --------->距左邊20px,距上邊20px
接下來第一個20px的位置實際上有三個屬性left right center 圖片靠左開始顯示 靠右 水平居中
第二個20px位置也有三個屬性top bottom center 圖片靠上開始顯示 靠下 垂直居中
四、設置背景顏色
1、背景顏色設置實例CSS代碼
background:red設置背景顏色為紅色
2、承接上面的代碼我們可以如下操作
background:red url(圖片地址) no-repeat 20px 20px;
這段css代碼和上面差不多,唯一多的地方就是背景圖片顯示不到的地方就是用紅色代替。
五、background教程總結
這個背景看起來還是有那么一點點的復雜,但是只要沉下心來慢慢去學習就會覺得這個就那樣,因此好好去學習下,載我們以后遇見復雜的網頁時,運用這些知識就會是得心應手了。