HTML背景色教程–如何更改Div背景色，并通過代碼示例進(jìn)行了說明

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

1.HTML元素的默認(rèn)背景色值

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

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

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

元素的默認(rèn)背景色

div的默認(rèn)背景顏色是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>

沒有任何樣式，它將在視覺上轉(zhuǎn)換為以下內(nèi)容。

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

<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>

這將導(dǎo)致以下結(jié)果：

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

背景顏色和CSS Box模型

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

如果您不熟悉Box模型，則可以查閱相關(guān)資料。問題是，當(dāng)您更改div的背景顏色時(shí)，Box模型的哪一部分會受到影響？簡單的答案是填充區(qū)域和內(nèi)容區(qū)域。讓我們通過一個(gè)例子來確認(rèn)這一點(diǎn)。

<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>

這將導(dǎo)致：

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

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

背景色值

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

<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>

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

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

/* 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;

額外注意

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

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

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

結(jié)論

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

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

言

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

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

css 顏色 —— color

網(wǎng)頁中使用顏色關(guān)鍵字、16進(jìn)制字符、rgb、rgba等表示紅，綠，藍(lán)三種顏色混合色，如下示例,幾種寫法都是指同一個(gè)顏色（紅色）：

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

對于16進(jìn)制形式，每2位表示一個(gè)顏色，從左到右分別是紅、綠、藍(lán)，每種顏色取值從00 到 FF。

如下示例：

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍(lán)色*/

對于rgb的表示法，由三個(gè)參數(shù)組成，分別是紅、綠、藍(lán)，每種顏色取值從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); /*藍(lán)色*/

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

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

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

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

css 背景 —— background

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

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

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

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

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

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

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

1、背景顏色 —— background-color

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

<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元素添加背景圖片，在早期網(wǎng)頁制作中被廣泛應(yīng)用，如今已不建議大量使用。如下實(shí)例：

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

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

但是你會發(fā)現(xiàn)，整個(gè)網(wǎng)頁鋪滿了圖片，上面的代碼默認(rèn)會鋪滿整個(gè)頁面從左到右，從上到下。如果不想被平鋪，可以使用background-repeat 設(shè)置。

背景圖片同時(shí)可以設(shè)置多個(gè)背景圖片，如下：

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

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

如下效果：

3、背景重復(fù)方式 —— background-repeat

它有如下幾個(gè)屬性：

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

實(shí)例如下：

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

背景圖片默認(rèn)顯示在左上角，語法如下：

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

如果要改變它的位置，可以使用關(guān)鍵字：top、bottom、left、right 和 center；或者使用長度值，如 100px 或 5cm；也可以使用百分?jǐn)?shù)值。

x 可以取值百分比| 數(shù)值| left | center | right。

y 可以取值百分比| 數(shù)值| top| center | bottom。

當(dāng)只設(shè)置一個(gè)值的時(shí)候，另一個(gè)會缺省為 center。

使用關(guān)鍵字，將背景圖片水平居中，垂直居中：

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，顯示效果和上圖一樣。

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

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

顯示效果如下：

5、背景圖相對于容器的基準(zhǔn)點(diǎn) —— background-origin

就是設(shè)置背景圖片相對于html元素什么位置作為初始坐標(biāo)點(diǎn)，語法：

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

幾種值得含義：

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

如下實(shí)例：

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

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

background-size: width height;

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

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

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

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

contain：把背景圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。

如下示例：

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

background-attachment 屬性有以下幾個(gè)值：

scroll	背景圖片隨頁面的其余部分滾動(dòng)。這是默認(rèn)
fixed	背景圖像是固定的
inherit	指定background-attachment的設(shè)置應(yīng)該從父元素繼承
local	背景圖片隨滾動(dòng)元素滾動(dòng)

如設(shè)置一個(gè)固定的背景圖片，不跟隨頁面滾動(dòng)：

background-attachment:fixed;

滾動(dòng)滾動(dòng)條，會發(fā)下背景圖片始終固定在屏幕那個(gè)位置。

8、背景繪制區(qū)域 —— background-clip

語法如下：

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

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

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

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

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

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

屬性值：

示例如下：

正常模式

luminosity 亮度模式

color 顏色模式

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

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

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

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

景顏色，作為頁面設(shè)計(jì)元素中不可或缺的一部分，對頁面整體效果有重大影響。在 CSS 中，使用 background-color 屬性來指定元素的背景顏色。通過正確使用 background color，可以提高頁面美觀，并為用戶提供最佳的體驗(yàn)。

設(shè)置背景色

在 CSS 中，使用以下語法設(shè)置背景色：

css

.element {

background-color: #color;

}

其中：

* .element 是要設(shè)置背景色的元素的 CSS 選擇器。

* #color 是指定背景色的顏色值，例如 #0 viciss紅色。

常見的背景色值

在 CSS 中有許多預(yù)定義的背景色值，例如：

* 白色：#ffffff

* 黑色：#0 Kün黑色

* 藍(lán)色：#0 Kün藍(lán)色

* Greens：#38b54 vicissteen

* 紅色：#d32929

背景色組合

背景色組合可以 create 出不同的視覺效果。以下是一些流行的背景色組合：

* 藍(lán)色與白色：經(jīng)典、安靜

* 黑色與白色：精致、現(xiàn)代

* 干本色：經(jīng)典、專業(yè)

* 青色與黃綠：活力、興奮

背景色陰影

使用背景陰影可以為頁面添加深度和視覺興趣。

css

.element {

background-color: #6 Kün灰色;

box-shadow: 0 vicissteen 5px 5px #888;

}

背景漸變

使用背景漸變可以創(chuàng)造出平滑的過渡效果。

css

.element {

background: linear-gradient(to right, #50 vicissteen 0 Kün灰色);

}

結(jié)論

在 CSS 中使用 background color 屬性可以輕松設(shè)置頁面元素的背景色。通過選擇合適的背景色值、組合和效果，可以為頁面創(chuàng)造出最佳的視覺體驗(yàn)。

在線咨詢

上一篇：Zoom的Web客戶端如何避免使用WebRTC?
下一篇：JavaScript 你必須了解的主流趨勢

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML背景色教程–如何更改Div背景色，并通過代碼示例進(jìn)行了說明

元素的默認(rèn)背景色

更改Div的背景顏色

背景顏色和CSS Box模型

背景色值

額外注意

結(jié)論

言

css 顏色 —— color

css 背景 —— background

您的項(xiàng)目需求