關於CSS背景background屬性經典的配置

2022-09-08 21:18:15 字數 1922 閱讀 7507

background

background-color: transparent;

background-image: url("/assets/images/phonetitle1.gif");

background-repeat: repeat;

background-attachment: scroll;

background-position: 0% 0%;

background-clip: border-box;

background-origin: padding-box;

background-size: auto auto;

1、background-color: transparent;

設定元素的背景顏色

屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和邊框區域,擴充套件到元素邊框的外邊界(但不包括外邊距)。如果邊框有透明部分(如虛線邊框),會透過這些透明部分顯示出背景色。

儘管在大多數情況下,沒有必要使用 transparent。不過如果您不希望某元素擁有背景色,同時又不希望使用者對瀏覽器的顏色設定影響到您的設計,那麼設定 transparent 值還是有必要的。

2、background-image: url("/assets/images/phonetitle1.gif");

3、background-repeat: repeat;

4、background-attachment: scroll;

屬性設定背景影象是否固定或者隨著頁面的其餘部分滾動。

scroll

預設值。背景影象會隨著頁面其餘部分的滾動而移動。

fixed

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

inherit

規定應該從父元素繼承 background-attachment 屬性的設定。

5、background-position: 0% 0%;

設定背景影象的起始位置。

預設值:0% 0%。

x% y%

第乙個值是水平位置,第二個值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您僅規定了乙個值,另乙個值將是 50%。

xpos ypos

第乙個值是水平位置,第二個值是垂直位置。

左上角是 0 0。單位是畫素 (0px 0px) 或任何其他的 css 單位。

如果您僅規定了乙個值,另乙個值將是50%。

您可以混合使用 % 和 position 值。

6、background-clip: border-box;

背景的繪製區域。

背景被裁剪到邊框盒。border-box

背景被裁剪到內邊距框。padding-box

背景被裁剪到內容框。content-box

7、background-origin: padding-box;

8、background-size: auto auto;

規定背景影象的尺寸。

background-size: length|percentage|cover|contain;

length

設定背景影象的高度和寬度。

第乙個值設定寬度,第二個值設定高度。

如果只設定乙個值,則第二個值會被設定為 "auto"。

percentage

以父元素的百分比來設定背景影象的寬度和高度。

第乙個值設定寬度,第二個值設定高度。

如果只設定乙個值,則第二個值會被設定為 "auto"。

cover

把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域。

背景影象的某些部分也許無法顯示在背景定位區域中。

contain

把影象影象擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域。

關於css背景位置設定

可以把 分開寫 background url image feed.gif no repeat background position 10px 5px 調整其中的數值就可以達到調整位置的目的。第乙個是左右,第二個引數是上下 例如 background position 20px 10px 指向右移...

關於背景的CSS宣告

背景色 background color ff0 背景 background image url 路徑 插入 屬於網頁的內容,也就是結構 背景的顯示原則 容器寬度等於尺寸,背景正好顯示在容器中 容器寬度大於尺寸,背景將預設平鋪,直至鋪滿整個容器 容器寬度小於尺寸,只顯示元素範圍以內的背景圖 背景平鋪...

css背景樣式css背景樣式

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