css入門(六) 背景樣式

2021-10-02 19:19:03 字數 1448 閱讀 2702

a. 背景樣式主要包括背景顏色和背景影象。

b. 背景顏色使用background-color屬性設定。

c. 背景影象包括:

background-image:定義背景影象的路徑,這是設定背景的必要屬性

background-repeat:定義背景影象的顯示方式(縱向平鋪、橫向平鋪等)

background-position:定義背景影象的顯示位置(相對於元素)

background-attachment:定義背景影象是否隨內容而滾動

1. 背景顏色,background-color屬性

a. 該屬性值可以設定為關鍵字(red、green等),也可以設定為rgb數值(#3ef0a4)。

2. 背景影象

2.1. background-image屬性

a. 必要屬性,格式為background-image: url("***"),支援絕對路徑和相對路徑。

b. 要手動設定background-image所在元素的width和height屬性,也即是說元素不會自適應。

e.g.

kobe

2.2. background-repeat屬性

a. 設定背景影象是否平鋪以及如何平鋪(平鋪就是重複顯示,不是拉伸)

b. 該屬性可以取如下值:

no-repeat:不平鋪

repeat:在水平方向(x軸)和垂直方向(y軸)同時平鋪,預設值

repeat-x:在水平方向(x軸)平鋪

repeat-y:在垂直方向(y軸)平鋪

2.3. background-position屬性

a. 這個屬性只能應用於塊元素和替換元素,替換元素包括img、input、textarea、select和object。

b. 該屬性值可以設定為關鍵字,也可以設定為兩個畫素值(」20px 30px「),設定為關鍵字時表示背景影象相對於元素的左上角的距離(分別是水平距離和垂直距離)。

c. 該屬性值可取的關鍵字為:

top left:左上(表示影象位於元素的左上角,下面的類似)

top center:靠上居中

top right:右上

left center:靠左居中

center center:正中

right center:靠右居中

bottom left:左下

bottom center:靠下居中

bottom right:右下

2.4. background-attachment屬性

a. 設定背景影象是隨元素滾動還是固定不動,該屬性值可取的關鍵字如下:

scroll:背景影象隨元素滾動

fixed:背景影象固定不動,只有其他元素隨著滾動條滾動

css背景樣式css背景樣式

css背景樣式 css背景樣式 序號中文說明 標記語法 1背景顏色2背景 3背景重複 4背景固定 5背景定位 6背影樣式 1 背景顏色 background color 語法 說明 引數取值和顏色屬性一樣 注意 在 html當中,要為某個物件加上背景色只有一種辦法,那就是先做乙個 在 中設定完背景色...

CSS 背景樣式

目錄 背景色 background color 背景影象 background image 背景重複 平鋪 background repeat 背景定位 background position 關鍵字百分數值 長度值 背景關聯 background attachment div注 定義沒有先後之分。...

css 背景樣式

樣式屬性 樣式名描述 background color 設定背景顏色 background image 設定背景 background repeat 設定背景重複 background position 設定背景影象定位 background attachment 設定背景影象滾動 backgrou...