background屬性介紹

2021-10-24 10:10:17 字數 1558 閱讀 3223

background屬性在css中有較多的應用,主要用來設定背景顏色、。background屬性可以分開寫,也可以合併,建議合併減少**量。

1. background-color:設定背景顏色;

設定的背景顏色會填充元素的內容、內邊距和邊框區域,擴充套件到元素邊框的外邊界(不包括外邊距)。如果邊框有透明部分(如虛線邊框),會透過這些透明部分顯示出背景色。顏色可以直接是顏色名稱(red)、十六進製制(#fff)、rgb(rbg(178,211,152)),inherit會繼承父級的背景顏色。

背景佔據元素的全部尺寸,包括內邊距和邊框,但不包括外邊距。預設在盒子的左上角,若盒子尺寸大於尺寸,會在水平和垂直方向平鋪。值描述

url(『』)

指向影象路徑

none

預設值,不顯示背景影象

inherit

從父級繼承background-image設定的屬性

設定是否平鋪影象,預設在水平和垂直方向平鋪。值描述

repeat

預設在水平和垂直方向平鋪

repeat-x

水平方向平鋪

repeat-y

垂直方向平鋪

no-repeat

不平鋪,只顯示一次

inherit

繼承父級元素設定的background-repeat屬性

設定水平位置:left、center、right

設定垂直位置:top、center、bottom

水平和垂直屬性兩兩結合可以設定的位置在四個角、四個邊的中心、盒子的正中心位置。還可以設定具體的畫素值把背景精確的定位到盒子的某個位置,還可以用百分比設定的位置。值描述

left、right 、top、center、bottom

x%、y%

第乙個是水平位置,第二個是垂直位置。左上角是0%0%,右下角是100%100%。如果只設定了乙個值,另乙個預設50%。

xpox、ypos

第乙個是水平位置,第二個是垂直位置。左上角是00,單位可以是px或其他css單位。若只規定了乙個值,另乙個值預設50%。%和position可以混合使用。

值描述scroll

預設值,會隨著頁面其餘部分的滾動而移動

fixed

當頁面的其餘部分滾動時,背景圖不會移動

inherit

繼承父級元素設定的background-attachedt屬性

7. background-origin

規定background-position屬性相對於什麼位置來定位。

ps:如果背景圖設定background-attachment屬性為「fixed」,則該屬性沒有效果。值描述

padding-box

背景圖相對於內編輯框定位

boder-box

背景圖相對於邊框盒定位

content-box

背景圖相對於內容框定位

屬性合併設定不僅僅效能更好,而且相容性好,減少了**冗餘。設定如下:

background簡寫屬性

在css中有多個屬性用於設定背景樣式,其中 background color 設定背景顏色。background repeat 設定是否以及如何重複背景影象 background position 設定背景影象的起始位置 background attachment 設定背景影象是否固定或者隨著頁面的...

background相關屬性

background origin 規定 background position 屬性相對於容器的哪一部分來定位。padding box 背景影象相對於內邊距框來定位 預設 border box背景影象相對於邊框盒來定位 content box背景影象相對於內容框來定位。background pos...

背景(background)屬性

background 背景屬性 background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動background color 設定背景顏色 color 指定背景顏色 transparent 預設。背景顏色透明 inherit 從父元素繼承 url 影象路徑 none 預設。...