Css基本樣式 背景

2021-09-20 20:23:13 字數 2111 閱讀 6400

一、css允許應用純色作為背景,也允許使用背景影象建立相當複雜的效果

二、屬性:

background-color    設定元素的背景顏色 1

2

3

4

body

<p>測試一下背景是否可以繼承

background-color這個屬性是不可以被繼承的

1

2

3

p

這時候可以看到p元素加上了乙個背景顏色,但是這個時候背景顏色比較長,它已經超出了文字的範圍,要想修改的話只能在css樣式來進行修改,修改它整個p標籤的寬度 1

2

3

4

p

現在可以看到p標籤寬度被修改後的效果,但是這個時候的背景顏色有點窄,那麼可以通過乙個padding屬性給它增寬

1

2

3

4

5

p

background-image    把設定為背景 1

2

3

body

也可以單獨地給乙個標籤加上背景顏色

1

2

3

p

background-position    設定背景的起始位置 1

2

3

4

5

body

這時候背景跑到了右邊並且只剩下一半了

其實這個屬性很少單獨出現,我們看到的是乙個right,其實它是出現了兩個屬性

right代表的是「right」和「center」

right代表的是所處的當前檢視的位置

center是代表當前要顯示的位置(即從中間開始顯示)

這個時候可以對background-position屬性值做一下修改

1

background-position: right top;

這時候代表背景在檢視的右側顯示,從的頂部開始(可以看到全面顯示的效果)

也可以在background-position內新增具體的數值

1

background-position: 0px 0px;

這時候代表從左上角(0,0)點開始

很多時候用數值來確定它的位置會方便一些

也可以用百分數來確定它的位置

background-attachment    背景影象是否固定或者隨著頁面的其餘部分滾動

1

2

3

4

5

body

預設情況下背景隨著頁面滾動

這裡把background-attachment屬性設定為不隨著頁面滾動

background-repeat    設定背景是否及如何重複

這裡在前面已經使用到了

三、css3背景

background-size    規定背景的尺寸

1

2

3

4

5

body

background-origin    規定背景的定位區域

background-clip    規定背景的繪製區域

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...