CSS背景屬性

2021-09-29 05:32:53 字數 1517 閱讀 4298

(一)、背景顏色

屬性:background-color

取值:任何合法顏色或者transparent

注意:背景顏色會填充到元素的內容區域以及邊框區域

(二)、背景影象

作用:以圖象作為元素的背景

屬性:background-image

取值:url(背景影象路徑)

(三)、背景重複

屬性:background-pepeat

取值:1.repeat

預設值,水平垂直方向都平鋪

2.repeat-x

僅在水平方向平鋪

3.repeat-y

僅在垂直方向平鋪

4.no-pepeat

不平鋪屬性:background-size

取值:1.value1 value2

指定背景影象的寬度和高度,以px為單位

2.value1% value2%

採用當前元素的框和高的百分比作為背景影象大小

3.cover

將背景影象等比放大,直到背景圖完全覆蓋到元素的所在區域為止

4.contain

將背景圖等比放大明知道背景影象的下邊或者右邊有乙個邊緣碰到元素為止

屬性:background-attachment

取值:1.scroll

滾動,預設值,背景圖會隨著文件而滾動

2.fixed

固定,背景圖不會隨著頁面文件而發生滾動,一直保持在視覺化區域中的固定位置處。

作用:改變背景影象在元素中的預設設定

屬性:background-position

取值:1.x y

x:背景影象水平偏移距離,取值為正,向右偏移,取值為負,向左偏移

y:背景圖向垂直偏移距離,取值為正,向下偏移,取值為負,向上偏移

2.x% y%

0% 0%:背景圖在元素的左上角

50% 50%:背景圖在元素的中間

100% 100%:背景圖在元素的右下角

3.關鍵字

x:可以被left/center/right取代

y:可以被top/center/bottom取代

background-position:center;

//水平和垂直都在中間位置處

background-position:left top;

//背景圖在左上方

background-position:top right;

//背景圖在右上方

雪碧圖、精靈圖

作用:將一些小的背景圖,合併到大的背景道中去,以便實現減少伺服器端的請求次數

步驟:1.根據要看的影象大小,建立乙個元素

2.將雪碧圖作為元素的背景圖,再通過背景影象位置實現位置偏移,將使用者要看的影象,顯示在元素中。

屬性:background

取值:color、url、repeat、attachment、position;

注意:如果不設定其中的某個值,將採用預設值。

CSS背景屬性

背景顏色屬性 background color 這個屬性為html元素設定背景顏色,相當於html中bgcolor屬性。body 上面的 表示body這個html元素的背景顏色是翠綠色的。背景屬性 background image 這個屬性為html元素設定背景,相當於html中background...

css背景屬性

css背景屬性 目錄 background attachment背景附件 設定背景影象是否固定或者隨著頁面的其餘部分滾動 background clip背景修剪 規定背景的繪製區域 background origin背景 規定 background position 屬性相對於什麼位置來定位 bac...

CSS背景屬性

1.如何設定標籤的背景顏色?在css中有乙個 background color 屬性,就是專門用來設定標籤的背景顏色的 取值 具體單詞 rgbrgba 十六進製制 快捷鍵 bc background color fff 1.如何設定背景?在css中有乙個叫做background image url ...