CSS 的背景

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

CSS 屬性定義背景效果:

background-color
background-image
background-repeat
background-attachment
background-position

背景顏色

background-color 屬性定義了元素的背景顏色.

頁面的背景顏色使用在body的選擇器中:

實例

body {background-color:#b0c4de;}

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

十六進制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
顏色名稱 - 如："red"

以下實例中, h1, p, 和 div 元素擁有不同的背景顏色:

實例

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

背景圖像

background-image 屬性描述了元素的背景圖像.

默認情況下，背景圖像進行平鋪重復顯示，以覆蓋整個元素實體.

頁面背景圖片設置實例:

實例

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

嘗試一下 ?

下面是一個例子是一個糟糕的文字和背景圖像組合。文本可讀性差:

實例

body {background-image:url('bgdesert.jpg');}

背景圖像 - 水平或垂直平鋪

默認情況下 background-image 屬性會在頁面的水平或者垂直方向平鋪。

一些圖像如果在水平方向與垂直方向平鋪，這樣看起來很不協調，如下所示:

實例

body

{

background-image:url('gradient2.png');

}

如果圖像只在水平方向平鋪 (repeat-x), 頁面背景會更好些:

實例

body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

背景圖像- 設置定位與不平鋪

讓背景圖像不影響文本的排版

如果你不想讓圖像平鋪，你可以使用 background-repeat 屬性:

實例

body

{

background-image:url('img_tree.png');

background-repeat:no-repeat;

}

以上實例中，背景圖像與文本顯示在同一個位置，為了讓頁面排版更加合理，不影響文本的閱讀，我們可以改變圖像的位置。

可以利用 background-position 屬性改變圖像在背景中的位置:

實例

body

{

background-image:url('img_tree.png');

background-repeat:no-repeat;

background-position:right top;

}

背景- 簡寫屬性

在以上實例中我們可以看到頁面的背景顏色通過了很多的屬性來控制。

為了簡化這些屬性的代碼，我們可以將這些屬性合并在同一個屬性中.

背景顏色的簡寫屬性為 "background":

實例

body {background:#ffffff url('img_tree.png') no-repeat right top;}

嘗試一下 ?

當使用簡寫屬性時，屬性值的順序為：:

background-color
background-image
background-repeat
background-attachment
background-position

以上屬性無需全部使用，你可以按照頁面的實際需要使用.

這個實例使用了先前介紹的CSS，你可以查看相應實例: CSS 實例

更多實例

如何設置固定的背景圖像

本例演示如何設置固定的背景圖像。圖像不會隨著頁面的其他部分滾動。

CSS 背景屬性

Property	描述
background	簡寫屬性，作用是將背景屬性設置在一個聲明中。
background-attachment	背景圖像是否固定或者隨著頁面的其余部分滾動。
background-color	設置元素的背景顏色。
background-image	把圖像設置為背景。
background-position	設置背景圖像的起始位置。
background-repeat	設置背景圖像是否及如何重復。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

為Web開發人員，最常見的事情之一就是更改HTML元素的背景顏色。但是，如果您不了解如何使用CSS background-color屬性，可能會產生混淆。在本文中，我們討論以下幾點

1.HTML元素的默認背景色值

2.如何更改div的背景顏色，這是非常常見的元素

3.該background-color屬性會影響CSS盒子模型的哪些部分，以及

4.此屬性可以采用的不同值。

元素的默認背景色

div的默認背景顏色是transparent。因此，如果您不指定div的背景色，它將顯示其父元素的背景色。

更改Div的背景顏色

在此示例中，我們將更改以下div的背景顏色。

<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>

沒有任何樣式，它將在視覺上轉換為以下內容。

讓我們通過向類中添加樣式來更改div的背景顏色。您可以通過嘗試HTML文件中的示例進行操作。

<style>
    .div-1 {
        background-color: #EBEBEB;
    }
    
    .div-2 {
    	background-color: #ABBAEA;
    }
    
    .div-3 {
    	background-color: #FBD603;
    }
</style>

<body>
    <div class="div-1"> I love HTML </div>
    <div class="div-2"> I love CSS </div>
    <div class="div-3"> I love JavaScript </div>
</body>

這將導致以下結果：

看！我們已成功更改了該div的背景顏色。接下來，讓我們更多地了解此屬性。讓我們看看background-color屬性如何影響CSS-box模型的各個部分。

背景顏色和CSS Box模型

根據CSS框模型，所有HTML元素都可以建模為矩形框。每個盒子由4個部分組成，如下圖所示。

如果您不熟悉Box模型，則可以查閱相關資料。問題是，當您更改div的背景顏色時，Box模型的哪一部分會受到影響？簡單的答案是填充區域和內容區域。讓我們通過一個例子來確認這一點。

<style>
    body {
        background-color: #ABBAEA;
    }
    div {
        height: 200px;
        margin: 20px;
        border: 5px solid;
        background-color: #FBD603;
    }
</style>
<body>
    <div>
        <p>This is the parent div which contains the div we are testing</p>

        <div>
            <p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
        </div>
    </div>
</body>

這將導致：

從上面的示例中，我們可以看到空白區域和邊框區域不受背景顏色變化的影響。我們可以使用border-color屬性更改邊框的顏色。邊距區域保持透明，并反映父容器的背景色。

最后，讓我們討論background-color屬性可以采用的值。

背景色值

就像color屬性一樣，background-color屬性可以采用六個不同的值。讓我們通過一個示例考慮三個最常見的值。在示例中，我們將div的背景色設置為具有不同值的紅色。

<style>
    /* Keyword value/name of color */
    .div-1 {
        background-color: red;
    }
    
    /* Hexadecimal value */
    .div-2 {
       background-color: #FF0000;	 
    }
    
    /* RGB value */
    .div-3 {
    	background-color: rgb(255,0,0);
    }
    
</style>

<body>
    <div class="div-1">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-2">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-3">
        <p>The background property can take six different values.</p>
    </div>
</body>

注意，它們的結果都是相同的背景色。

該background-color屬性可以采用的其他值包括HSL值，特殊關鍵字值和全局值。這是每個例子。

/* HSL value */
background-color: hsl(0, 100%, 25%;

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

額外注意

設置元素的背景色時，重要的是要確保背景色和其包含的文本顏色的對比度足夠高。這是為了確保弱視人士可以輕松閱讀文本。

第一個div的背景顏色與文本顏色之間的對比度不夠高，每個人都看不到。因此，除非您是唯一正在使用的網站，并且您的視力非常好，否則應避免這種顏色組合。

第二個div在背景顏色和文本顏色之間具有更好的對比度。因此，它使人們更容易閱讀和閱讀。

結論

在本文中，我們看到了如何更改div的背景顏色。我們還討論了CSS Box模型的哪些部分受背景顏色變化的影響。最后，我們討論了background-color屬性可以采用的值。

希望本文對您有所幫助。謝謝閱讀。

言

如果網頁只有一種顏色，那是非常可怕的，顏色的設置豐富了網頁，就如同多彩繽紛的世界。

在了解css顏色之前，我們回顧下計算機是如何顯示顏色的？計算機根據色光三原色的原理通過各種算法來顯示顏色。

css 顏色 —— color

網頁中使用顏色關鍵字、16進制字符、rgb、rgba等表示紅，綠，藍三種顏色混合色，如下示例,幾種寫法都是指同一個顏色（紅色）：

color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)

對于16進制形式，每2位表示一個顏色，從左到右分別是紅、綠、藍，每種顏色取值從00 到 FF。

如下示例：

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍色*/

對于rgb的表示法，由三個參數組成，分別是紅、綠、藍，每種顏色取值從0 到 255。

如下示例：

color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*紅色*/
color: rgb(0,255,0); /*綠色*/
color: rgb(0,0,255); /*藍色*/

紅，綠，藍值從0到255的結合，給出了總額超過1600多萬不同的顏色（256 × 256 ×256）。

但是現代大多數顯示器能夠顯示至少16384種顏色。所以在使用顏色時要格外注意，避免設置不能夠顯示的顏色，可以參考網頁安全色：https://www.w3school.com.cn/cssref/css_colors.asp。

顏色除了有三原色紅綠藍組成，還有亮度層級，如下圖：

rgba 中的a是指透明度，這個是css3新增加的屬性，通過rgba可以設置更加漂亮的顏色。

css 背景 —— background

通過background屬性可以設置元素的背景色、背景圖片，語法如下：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background 在一個聲明中設置所有的背景屬性，可以在這里設置如下屬性：

background-color —— 背景顏色。
background-image —— 使用的背景圖像
background-position —— 背景圖像的位置
background-size —— 背景圖片的大小
background-repeat —— 如何重復背景圖像
background-origin —— 背景圖片的定位區域
background-clip —— 背景的繪制區域
background-attachment —— 背景圖像是否固定或者隨著頁面的其余部分滾動。

各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個值。

建議使用background 簡寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當然你也可以分開使用，比如：

background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;

1、背景顏色 —— background-color

background-color 和之前講的的color 一樣，可以使用16進制、rgb、rgba等設置顏色。如下實例：

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>

如下圖顯示：

注意：background-color: transparent; 指透明色，不顯示任何顏色。

2、背景圖片的使用——background-image

給html元素添加背景圖片，在早期網頁制作中被廣泛應用，如今已不建議大量使用。如下實例：

body {background-image:url(/static/bg.gif);}

這里使用了一個125*125大小的圖片，如下：

但是你會發現，整個網頁鋪滿了圖片，上面的代碼默認會鋪滿整個頁面從左到右，從上到下。如果不想被平鋪，可以使用background-repeat 設置。

背景圖片同時可以設置多個背景圖片，如下：

background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

多個圖像以逗號隔開，在頁面中多個圖片會疊加顯示，第一張圖片顯示在最頂端。

如下效果：

3、背景重復方式 —— background-repeat

它有如下幾個屬性：

repeat	默認。背景圖像將在垂直方向和水平方向重復。
repeat-x	背景圖像將在水平方向重復。
repeat-y	背景圖像將在垂直方向重復。
no-repeat	背景圖像不重復。
inherit	從父元素繼承 background-repeat 屬性的設置。

實例如下：

4、背景圖的位置 —— background-position

背景圖片默認顯示在左上角，語法如下：

background-position: x y; // x 距離左邊距離，y距離頂部距離

如果要改變它的位置，可以使用關鍵字：top、bottom、left、right 和 center；或者使用長度值，如 100px 或 5cm；也可以使用百分數值。

x 可以取值百分比| 數值| left | center | right。

y 可以取值百分比| 數值| top| center | bottom。

當只設置一個值的時候，另一個會缺省為 center。

使用關鍵字，將背景圖片水平居中，垂直居中：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

使用百分比%：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%;

50% 50% 等同于 center center，顯示效果和上圖一樣。

還可以使用具體數值，比如 px、em、cm等。

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px;

顯示效果如下：

5、背景圖相對于容器的基準點 —— background-origin

就是設置背景圖片相對于html元素什么位置作為初始坐標點，語法：

background-origin: padding-box|border-box|content-box;

幾種值得含義：

padding-box	背景圖像相對填充框的位置
border-box	背景圖像相對邊界框的位置
content-box	背景圖像相對內容框的位置

如下實例：

6、背景圖片大小 —— background-size

默認會顯示背景圖原始尺寸，可以通過此屬性設置背景圖片在元素上的大小，語法：

background-size: width height;

寬度和高度可以使用數值、百分比%、cover 及 contain ;

數值：可以使用任何單位的數字，比如 px、em、cm等。如果設置一個值，第二個為"auto(自動)"。

百分比%：相對于其所在html原始寬度和高度，如果設置一個值，第二個為"auto(自動)"。

cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。

contain：把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。

如下示例：

7、背景圖像是否固定或者隨著頁面的其余部分滾動

background-attachment 屬性有以下幾個值：

scroll	背景圖片隨頁面的其余部分滾動。這是默認
fixed	背景圖像是固定的
inherit	指定background-attachment的設置應該從父元素繼承
local	背景圖片隨滾動元素滾動

如設置一個固定的背景圖片，不跟隨頁面滾動：

background-attachment:fixed;

滾動滾動條，會發下背景圖片始終固定在屏幕那個位置。

8、背景繪制區域 —— background-clip

語法如下：

background-clip: border-box|padding-box|content-box;

border-box	默認值。背景繪制在邊框方框內（剪切成邊框方框）。
padding-box	背景繪制在襯距方框內（剪切成襯距方框）。
content-box	背景繪制在內容方框內（剪切成內容方框）。

這個屬性類似于 background-origin ，只不過它會裁剪背景圖片，如下示例：

9、背景層的混合模式 —— background-blend-mode

所謂混合模式就是將圖片與顏色或圖片與圖片進行混合，語法：

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

屬性值：

示例如下：

正常模式

luminosity 亮度模式

color 顏色模式

其它模式可以自己試試，看下有什么區別。

到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡寫也可以分開寫，要想完全掌握，還得多練習，每種屬性進行組合使用看看其效果。

一般建議使用 background 簡寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯誤，并補充。

上篇：前端入門——css鏈接樣式

在線咨詢

上一篇：HTML5基本布局模板示例
下一篇：java中checked異常和unchecked異常區別

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 的背景

元素的默認背景色

更改Div的背景顏色

背景顏色和CSS Box模型

背景色值

額外注意

結論

言

css 顏色 —— color

css 背景 —— background

您的項目需求