CSS 背景

lastSeries 發布于2019-08-28 18:18 / 1590人閱讀

摘要：概覽背景屬性用于定義元素的背景。如果邊框有透明部分如虛線邊框，會透過這些透明部分顯示出背景色。從父元素繼承背景顏色，這個在上存在兼容問題。背景圖像會隨著頁面其余部分的滾動而移動。簡寫屬性屬性在一個聲明中設置所有背景屬性。

概覽

CSS 背景屬性用于定義HTML元素的背景。

相關的屬性

background-color: 設置背景顏色

background-image: 設置背景圖片

background-repeat: 設置背景圖片是否重復及如何重復

background-position: 設置背景圖像的位置

background-attachment: 背景圖像是否固定或者隨著頁面的其余部分滾動

background: 簡寫屬性，作用是將背景屬性設置在一個聲明中

元素背景的范圍

背景會填充元素的內容、內邊距和邊框區域，擴展到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。

瀏覽器支持

所有主要瀏覽器都支持背景屬性。

注意： IE7和更早的版本不支持"繼承"的值（inherit）。 IE8需要定義!DOCTYPE。 IE9支持"繼承"。

背景顏色

background-color 屬性用來定義元素的背景顏色。

body {background-color: #b0c4de;}

CSS中，顏色值通常以以下方式定義:

十六進制 - 如：#ff0000

RGB - 如：rgb(255,0,0)

顏色名稱 - 如：red

默認 - transparent,透明之意。如果一個元素沒有指定背景色，那么背景就是透明的。

inherit 從父元素繼承背景顏色，這個在IE上存在兼容問題。

背景圖像

background-image 屬性用來定義元素的背景圖像。

默認地，背景圖像位于元素的左上角，并在水平和垂直方向上重復。

body {background-image: url("paper.gif");}

提示：背景顏色和背景圖像是可以共存的，請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。

body {background-image: url("paper.gif");background-color:#fff;}

屬性值：

none - 默認無背景圖像

url("image path") - 圖像的可訪問路徑，可以使用網絡地址，相對路徑地址，絕對路徑地址

inherit - 從父元素繼承

背景重復

如果需要對背景圖像平鋪，可以使用background-repeat屬性。

body {
    background-image: url("gradient2.png");
    background-repeat: repeat-x;
}

屬性值：

repeat 導致圖像在水平垂直方向上都平鋪，默認。

repeat-x 和 repeat-y 分別使背景圖像只在水平或垂直方向上重復。

no-repeat 則不允許圖像在任何方向上平鋪。

inherit 從父元素繼承。

背景定位

background-position 屬性用來控制背景圖片的位置，一般配合 background-repeat: no-repeat; 使用。

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px，最后也可以使用百分數值。

關鍵詞

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

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

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

百分比

百分數值的表現方式更為復雜。假設你希望用百分數值將圖像在其元素中居中：

body { 
    background-image: url("/eg_bg_03.gif");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

如果圖像位于 0% 0%，其左上角將放在元素內邊距區的左上角。如果圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。

把一個圖像放在水平方向 2/3、垂直方向 1/3 處：

body { 
    background-image: url("/eg_bg_03.gif");
    background-repeat: no-repeat;
    background-position: 66% 33%;
}

如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將假設為 50%。

長度值

長度值解釋的是元素內邊距區左上角的偏移。偏移點是圖像的左上角。

比如，如果設置值為 50px 100px，圖像的左上角將在元素內邊距區左上角向右 50 像素、向下 100 像素的位置上。

背景固定

background-attachment 屬性設置背景圖像是否固定或隨頁面的其余部分滾動。

body {
    background-image:url("image.png");
    background-repeat:no-repeat;
    background-attachment:fixed;
}

屬性值：

scroll 默認。背景圖像會隨著頁面其余部分的滾動而移動。

fixed 當頁面的其余部分滾動時，背景圖像不會移動。

inherit 從父元素繼承。

簡寫屬性

background 屬性在一個聲明中設置所有背景屬性。

body { 
    background: #00FF00 url("bgimage.gif") no-repeat fixed top;
}

如果不設置其中的某個值，也不會出問題，比如 background:#ff0000 url("smiley.gif"); 也是允許的。

通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支持，而且需要鍵入的字母也更少。

GPU云服務器云服務器背景圖片html5設置背景去背景行背景設置背景

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111158.html

css基礎系列

摘要：盒子模型和標準盒子模型行內塊元素，元素呈現為具有相依特性元素不會被顯示。文字基線屬性設置元素中文本行高語法長度值百分比瀏覽器有默認的行高，不同瀏覽器默認行高不一樣。盒子模型盒子模型的概念高和寬的設置邊框的設置內邊距的設置外邊距的設置盒子的計算元素顯示的方式盒子模型： border邊框，margin外邊距，padding內部距，content內容，width寬度。 ...

shiina 2019-04-23 11:40 評論0 收藏0
css基礎系列

摘要：盒子模型邊框，外邊距，內部距，內容，寬度。盒子模型和標準盒子模型行內塊元素，元素呈現為具有相依特性元素不會被顯示。文字基線屬性設置元素中文本行高語法長度值百分比瀏覽器有默認的行高，不同瀏覽器默認行高不一樣。盒子模型： border邊框，margin外邊距，padding內部距，content內容，width寬度。高度： height: 長度值|百分比|auto 最大高度: m...

SexySix 2019-04-22 16:12 評論0 收藏0
CSS<背景>

摘要：背景概覽有幾個很棒的背景屬性，它們提供了對背景更強大的控制。規定背景的繪制區域。數值定義設置背景圖像的高度和寬度。 1.css3簡介 CSS3是CSS（層疊樣式表）技術的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。 2.css3背景概覽有幾個很棒的背景屬性，...

smartlion 2019-08-30 15:54 評論0 收藏0
CSS<背景>

摘要：背景概覽有幾個很棒的背景屬性，它們提供了對背景更強大的控制。規定背景的繪制區域。數值定義設置背景圖像的高度和寬度。1.css3簡介 CSS3是CSS（層疊樣式表）技術的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。 2.css3背景概覽有幾個很棒的背景屬性，它們提...

番茄西紅柿 2019-04-23 13:32 評論0 收藏0