Css樣式--背景樣式詳解

2024-07-11 08:28:19

字體：大中小

來源：轉載

供稿：網友

背景：

1.背景屬性都不能繼承

2.背景色：其默認值是 transparent。transparent 有“透明”之意 h1 {background-color: #00ff00}

3.背景圖像：背景重復背景定位

復制代碼

代碼如下:
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;background-repeat: repeat-y;<code>background-position:center;</code>}

背景重復：repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復，no-repeat 則不允許圖像在任何方向上平鋪。

背景定位：為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最后也可以使用百分數值。不同類型的值對于背景圖像的放置稍有差異。

4.關鍵字

圖像放置關鍵字最容易理解，其作用如其名稱所表明的。例如，top right 使圖像放置在元素內邊距區的右上角。

根據規范，位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另一個對應垂直方向。

如果只出現一個關鍵字，則認為另一個關鍵字是 center。

所以，如果希望每個段落的中部上方出現一個圖像，只需聲明如下：

復制代碼

代碼如下:
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}

下面是等價的位置關鍵字：