CSS background屬性及其屬性值

2022-04-10 03:36:11 字數 1911 閱讀 4826

background-color/*背景顏色*/

background-image/*背景*/

background-repeat/*設定背景影象是否重複,及如何重複*/

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

background-position/*設定背景影象的起始位置*/

background/*簡寫屬性*/

1、background-color:

顏色值通常以以下方式定義:

十六進製制 - 如:"#ff0000"

rgb - 如:「rgb(255,0,0)」

顏色名稱 - 如:「red」

h1 

p div

2、background-image:

預設情況下,背景影象進行平鋪重複顯示,以覆蓋整個元素實體.

body
body
3、background-repeat:

常用屬性:

repeat:背景影象將向垂直和水平方向重複。這是預設

repeat-x:只有水平位置會重複背景影象

repeat-y:只有垂直位置會重複背景影象

no-repeat:背景影象不會重複

例:

body

4、background-position:

left top:左上

left center:左中

left bottom:左下

right top:右上

right center:右中

right bottom:右下

center top:居中置頂

center center:水平垂直居中

center bottom:居中置底

以上這些屬性值,只寫乙個時,另乙個預設為center

x% y%:x是水平位置,y是垂直。左上角是0%0%。右下角是100%100%。

xpos ypos:x是水平位置,y是垂直。左上角是0。單位可以是畫素(0px0px)或任何其他 css單位

以上兩個屬性值,只寫乙個時,另乙個為50%

注意:使用該屬性,background-attachment必須設定為 「fixed(固定)」.

body

4、background-attachment:

scroll: 背景隨頁面的其餘部分滾動。這是預設

fixed:背景影象是固定的

body 

5、background簡寫屬性

當使用簡寫屬性時,屬性值的順序為::

1.background-color

2.background-image

3. background-repeat

4. background-attachment

5. background-position

以上屬性無需全部使用,你可以按照頁面的實際需要使用.

body

CSS background系列屬性

關於顏色 能夠用英語單詞來表述的顏色都是簡單的顏色 用rgb方法來表示 光學顯示器每個畫素都是由三原色的發光原件組成的,靠明亮度不同調成不同顏色。用逗號隔開,r,g,b的值,每個值的取值範圍0 255,一共256個值。如果此項值是255,就說明是純色。紅色 background color rgb ...

css background屬性詳細解析

css可以控制html中各元素的背景顯示,包括背景顏色 背景 背景重複 背景定位和背景關聯5項。在css中,可以通過background屬性對這5項統一控制,也可通過這5項對應的屬性分別控制。下面我們先了解一下css中的這5個屬性。css可以為所有元素設定背景色,從body 一直到em 和a 等內聯...

CSS background背景相關屬性

1 background背景相關 background color 背景顏色 顏色單詞 red blue green.十六進製制值 0 9 a f 三原色值 rgb 0,0,0 0 255 example background color pink background color ccc back...