當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

css背景属性

發布時間：2023/11/27 生活经验 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 css背景属性小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS背景：

1.背景色：background-color屬性，設置元素的背景顏色；

<1>元素背景的范圍:

background-color 屬性為元素設置一種純色。這種顏色會填充元素的內容、內邊距和邊框區域，擴展到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。

<2>可能的取值:

值	描述
color_name	規定顏色值為顏色名稱的背景顏色（比如 red）。
hex_number	規定顏色值為十六進制值的背景顏色（比如 #ff0000）。
rgb_number	規定顏色值為 rgb 代碼的背景顏色（比如 ? rgb(255,0,0)）。
transparent	默認值，背景顏色為透明。
inherit	規定應該從父元素繼承 background-color 屬性的設置。

Ps: background-color 不能繼承。

2.背景圖像：background-image屬性，設置元素的背景圖像；

? <1>元素的應用：

元素的背景占據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。默認地，背景圖像位于元素的左上角，并在水平和垂直方向上重復。

<2>可能的值：

值	描述
url	指向圖像的路徑。
none	默認值,不顯示背景圖像。
inherit	規定應該從父元素繼承 background-image 屬性的設置。

Ps: background-image 不能繼承,請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。

3.背景重復：background-repeat屬性，設置元素的背景平鋪的方式；

4.背景定位：background-position屬性，設置背景圖像的起始位置；

<1>可能的值：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您僅規定了一個關鍵詞，那么第二個值將是"center"。默認值：0% 0%。
x% y%	第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值，另一個值將是 50%。
xpos ypos	第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。如果您僅規定了一個值，另一個值將是50%。您可以混合使用 % 和 position 值。

Ps: 需要把 background-attachment 屬性設置為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。

5.背景關聯：background-attachment屬性，設置背景圖像是否固定或者隨著頁面的其余部分滾動。

<1>可能的值：

值	描述
scroll	默認值。背景圖像會隨著頁面其余部分的滾動而移動。
fixed	當頁面的其余部分滾動時，背景圖像不會移動。
inherit	規定應該從父元素繼承 background-attachment 屬性的設置。

轉載于:https://www.cnblogs.com/alog0210/p/background_log.html

以上是生活随笔為你收集整理的css背景属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。