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

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

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

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

3.該background-color屬性會(huì)影響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>

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

讓我們通過(guò)向類中添加樣式來(lái)更改div的背景顏色。您可以通過(guò)嘗試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的背景顏色。接下來(lái)，讓我們更多地了解此屬性。讓我們看看background-color屬性如何影響CSS-box模型的各個(gè)部分。

背景顏色和CSS Box模型

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

如果您不熟悉Box模型，則可以查閱相關(guān)資料。問(wèn)題是，當(dāng)您更改div的背景顏色時(shí)，Box模型的哪一部分會(huì)受到影響？簡(jiǎn)單的答案是填充區(qū)域和內(nèi)容區(qū)域。讓我們通過(guò)一個(gè)例子來(lái)確認(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è)不同的值。讓我們通過(guò)一個(gè)示例考慮三個(gè)最常見(jiàn)的值。在示例中，我們將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í)，重要的是要確保背景色和其包含的文本顏色的對(duì)比度足夠高。這是為了確保弱視人士可以輕松閱讀文本。

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

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

結(jié)論

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

希望本文對(duì)您有所幫助。謝謝閱讀。

23 年的 CSS 新特性中，有一個(gè)非常重要的功能更新 -- 相對(duì)顏色。

簡(jiǎn)單而言，相對(duì)顏色的功能，讓我們?cè)?CSS 中，對(duì)顏色有了更為強(qiáng)大的掌控能力。

其核心功能就是，讓我們能夠基于一個(gè)現(xiàn)有顏色 A，通過(guò)一定的轉(zhuǎn)換規(guī)則，快速生成我們想要的顏色 B。

其功能能夠涵蓋：

精簡(jiǎn)
調(diào)暗
飽和度
降低飽和度
色度增強(qiáng)
調(diào)整不透明度
反轉(zhuǎn)
補(bǔ)充
轉(zhuǎn)換
對(duì)比度
調(diào)色板

當(dāng)然，今天我們不會(huì)一個(gè)一個(gè)去過(guò)這些功能，更多的時(shí)候，我們只需要知道我們能夠?qū)崿F(xiàn)這些功能。

本文，我們將從實(shí)際實(shí)用角度出發(fā)，基于實(shí)際的案例，看看 CSS 相對(duì)顏色，能夠如何解決我們的一些實(shí)際問(wèn)題。

快速語(yǔ)法入門

首先，我們通過(guò)一張圖，一個(gè)案例，快速入門 CSS 相對(duì)顏色語(yǔ)法：

相對(duì)顏色語(yǔ)法的目標(biāo)是允許從另一種顏色派生顏色。

上圖顯示了將原始顏色 green 轉(zhuǎn)換為新顏色的顏色空間后，該顏色會(huì)轉(zhuǎn)換為以 r、g、b 和 alpha 變量表示的各個(gè)數(shù)字，這些數(shù)字隨后會(huì)直接用作新的 rgb() 顏色的值。

舉個(gè)例子：

<p> CSS Relative Color </p>

p {
    color: rgb(255, 0, 0);
}

實(shí)現(xiàn)一個(gè) color 為紅色（rgb 值為 rgb(255, 0, 0)）的字體：

基于上面的相對(duì)顏色語(yǔ)法，我如何通過(guò)一個(gè)紅色生成綠色文字呢？示意如下：

p {
    --color: rgb(255, 0, 0);
    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result = rgb(0, 255, 0) */
}

效果如下，我們就得到綠色字體：

解釋一下：

原本的紅色顏色，我們把它設(shè)置為 CSS 變量 --color: rgb(255, 0, 0)
想通過(guò)紅色得到綠色，對(duì)于紅色的 rgb 值 rgb(255, 0, 0) 而言，需要轉(zhuǎn)換成 rgb(0, 255, 0)
使用 CSS 相對(duì)顏色語(yǔ)法，就是 rgb(from var(--color) calc(r - 255) calc(g + 255) b)

通過(guò)這個(gè) DEMO，我們把幾個(gè)核心基礎(chǔ)語(yǔ)法點(diǎn)學(xué)習(xí)一下：

from 關(guān)鍵字

from 關(guān)鍵字，它是相對(duì)顏色的核心。它表示會(huì)將 from 關(guān)鍵字后的顏色定義轉(zhuǎn)換為相對(duì)顏色！在 from 關(guān)鍵字后面，CSS 會(huì)期待一種顏色，即能夠啟發(fā)生成另一種顏色。

from 關(guān)鍵字 后的顏色表示，支持不同顏色表示或者是 CSS 變量

第二個(gè)關(guān)鍵點(diǎn)，from 后面通常會(huì)接一個(gè)顏色值，這個(gè)顏色值可以是任意顏色表示法，或者是一個(gè) CSS 變量，下面的寫(xiě)法都是合法的：

p {
    color: rgba(from #ff0000) r g b);
    color: rgb(from rgb(255, 0, 0) r g b);
    color: rgb(from hsl(0deg, 100%, 50%) r g b);
    color: rgb(from var(--hotpink) r g b);
}

對(duì)轉(zhuǎn)換后的變量使用 calc() 或其他 CSS 函數(shù)

另外一個(gè)非常重要的基礎(chǔ)概念就是，我們可以對(duì) (from color r g b) 后的轉(zhuǎn)換變量 r g b 使用 calc() 或其他 CSS 函數(shù)。

就是我們上面的例子：

p {
    --color: rgb(255, 0, 0);
    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result = rgb(0, 255, 0) */
}

相對(duì)顏色語(yǔ)法支持，各種顏色表示函數(shù)：

相對(duì)顏色的基礎(chǔ)的使用規(guī)則就是這樣，它不僅支持 rgb 顏色表示法，它支持所有的顏色表示法：

sRGB 顏色空間：hsl()、hwb()、rgb()；
CIELAB 顏色空間：lab()、lch()；
Oklab 顏色空間：oklab()、oklch()；

使用 CSS 相對(duì)顏色，實(shí)現(xiàn)統(tǒng)一按鈕點(diǎn)擊背景切換

通常頁(yè)面上的按鈕，都會(huì)有 hover/active 的顏色變化，以增強(qiáng)與用戶的交互。

像是這樣：

最常見(jiàn)的寫(xiě)法，就是我們需要在 Normal 狀態(tài)、Hover 狀態(tài)、Active 狀態(tài)下寫(xiě) 3 種顏色：

p {
    color: #ffcc00;
    transition: .3s all;
}
/* Hover 偽類下為 B 顏色 */
p:hover {
    color: #ffd21f;
}
/** Active 偽類下為 C 顏色 **/
p:active {
    color: #ab8a05;
}

在之前，我們介紹過(guò)一種利用濾鏡 filter: contrast() 或者 filter: brightness() 的統(tǒng)一解決方案，無(wú)需寫(xiě)多個(gè)顏色值，可以根據(jù) Normal 狀態(tài)下的色值，通過(guò)濾鏡統(tǒng)一實(shí)現(xiàn)更亮、或者更暗的偽類顏色。

在今天，我們也可以利用 CSS 相對(duì)顏色來(lái)做這個(gè)事情：

div {
    --bg: #fc0;
    background: var(--bg);
    transition: .3s all;
}

div:hover {
    background: hsl(from var(--bg) h s calc(l * 1.2));
}
div:active {
    background: hsl(from var(--bg) h s calc(l * 0.8));
}

我們通過(guò) hsl 色相、飽和度、亮度顏色表示法表示顏色。實(shí)現(xiàn)：

在 :hover 狀態(tài)下，根據(jù)背景色，將背景亮度 l 調(diào)整為原背景色的 1.2 倍
在 :avtive 狀態(tài)下，根據(jù)背景色，將背景亮度 l 調(diào)整為原背景色的 0.8 倍

在實(shí)際業(yè)務(wù)中，這是一個(gè)非常有用的用法。

使用 CSS 相對(duì)顏色，實(shí)現(xiàn)文字顏色自適應(yīng)背景

相對(duì)顏色，還有一個(gè)非常有意思的場(chǎng)景 -- 讓文字顏色能夠自適應(yīng)背景顏色進(jìn)行展示。

有這么一種場(chǎng)景，有的時(shí)候，無(wú)法確定文案的背景顏色的最終表現(xiàn)值（因?yàn)楸尘邦伾闹悼赡苁呛笈_(tái)配置，通過(guò)接口傳給前端），但是，我們又需要能夠讓文字在任何背景顏色下都正常展現(xiàn)（譬如當(dāng)?shù)咨珵楹谏珪r(shí)文字應(yīng)該是白色，當(dāng)背景為白色時(shí)，文字應(yīng)該為黑色）。

像是這樣：

在不確定背景顏色的情況下，無(wú)論什么情況，文字顏色都能夠適配背景的顏色。

在之前，純 CSS 沒(méi)有特別好的方案，可以利用 mix-blend-mode: difference 進(jìn)行一定程度的適配：

div {
    // 不確定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

實(shí)操過(guò)這個(gè)方案的同學(xué)都會(huì)知道，在一定情況下，前景文字顏色還是會(huì)有一點(diǎn)瑕疵。并且，混合模式這個(gè)方案最大的問(wèn)題是會(huì)影響清晰度。

有了 CSS 相對(duì)顏色后，我們有了更多的純 CSS 方案。

利用 CSS 相對(duì)顏色，反轉(zhuǎn)顏色

我們可以利用相對(duì)顏色的能力，基于背景色顏色進(jìn)行反轉(zhuǎn)，賦值給 color。

一種方法是將顏色轉(zhuǎn)換為 RGB，然后從 1 中減去每個(gè)通道的值。

代碼非常簡(jiǎn)單：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b));  /** 基于背景反轉(zhuǎn)顏色 **/
}

用 1 去減，而不是用 255 去，是因?yàn)榇丝蹋瑫?huì)將 rgb() 表示法中的 0~255 映射到 0~1。

效果如下：

配個(gè)動(dòng)圖，我們利用背景色的反色當(dāng) Color 顏色，適配所有背景情況：

完整的 DEMO 和代碼，你可以戳這里：CodePen Demo -- CSS Relatvie Color Adapt BG

當(dāng)然，這個(gè)方案還有兩個(gè)問(wèn)題：

如果顏色恰好是在 #808080 灰色附近，它的反色，其實(shí)還是它自己！會(huì)導(dǎo)致在灰色背景下，前景文字不可見(jiàn)；
絕大部分情況雖然可以正常展示，但是并不是非常美觀好看

為了解決這兩個(gè)問(wèn)題，CSS 顏色規(guī)范在 CSS Color Module Level 6 又推出了一個(gè)新的規(guī)范 -- color-contrast()。

利用 color-contrast()，選擇高對(duì)比度顏色

color-contrast() 函數(shù)標(biāo)記接收一個(gè) color 值，并將其與其他的 color 值比較，從列表中選擇最高對(duì)比度的顏色。

利用這個(gè) CSS 顏色函數(shù)，可以完美的解決上述的問(wèn)題。

我們只需要提供 #fff 白色和 #000 黑色兩種可選顏色，將這兩種顏色和提供的背景色進(jìn)行比較，系統(tǒng)會(huì)自動(dòng)選取對(duì)比度更高的顏色。

改造一下，上面的代碼，它就變成了：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: color-contrast(var(--bg) vs #fff, #000);  /** 基于背景色，自動(dòng)選擇對(duì)比度更高的顏色 **/
}

這樣，上面的 DEMO 最終效果就變成了：

此方案的優(yōu)勢(shì)在于：

可以限定前景 color 顏色為固定的幾個(gè)色值，以保證 UI 層面的統(tǒng)一及美觀
滿足任何情況下的背景色

當(dāng)然，唯一限制這個(gè)方案的最大問(wèn)題在于，當(dāng)前，color-contrast 還只是一個(gè)實(shí)驗(yàn)室功能，未大規(guī)模被兼容。

總結(jié)一下

到今天，我們可以利用 CSS 提供的各類顏色函數(shù)，對(duì)顏色有了更為強(qiáng)大的掌控力。

很多交互效果，不借助 JavaScript 的運(yùn)算，也能計(jì)算出我們想要的最終顏色值。本文簡(jiǎn)單的借助：

使用 CSS 相對(duì)顏色，實(shí)現(xiàn)統(tǒng)一按鈕點(diǎn)擊背景切換
使用 CSS 相對(duì)顏色，實(shí)現(xiàn)文字顏色自適應(yīng)背景

兩個(gè)案例，介紹了 CSS 相對(duì)顏色的功能。

原文鏈接：https://juejin.cn/post/7321410822789742618

現(xiàn)在好多網(wǎng)站中呢，都有這樣一個(gè)功能就是在頁(yè)面的右上角或者是某個(gè)角落可以切換網(wǎng)頁(yè)的背景音色或者是背景圖片等等，其實(shí)這個(gè)操作真的就是特別的簡(jiǎn)單，那么今兒道哥就給大家分享這個(gè)特別小的只是點(diǎn)。用js來(lái)實(shí)現(xiàn)選擇下拉列表中的顏色來(lái)切換網(wǎng)頁(yè)的背景顏色。

在線咨詢

上一篇：HTML網(wǎng)頁(yè)中的圖形是如何對(duì)齊的？有什么方法可以使它們對(duì)齊？
下一篇：前端系列-css盒子模型