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

為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屬性可以采用的值。

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

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

簡單而言，相對顏色的功能，讓我們在 CSS 中，對顏色有了更為強大的掌控能力。

其核心功能就是，讓我們能夠基于一個現有顏色 A，通過一定的轉換規則，快速生成我們想要的顏色 B。

其功能能夠涵蓋：

精簡
調暗
飽和度
降低飽和度
色度增強
調整不透明度
反轉
補充
轉換
對比度
調色板

當然，今天我們不會一個一個去過這些功能，更多的時候，我們只需要知道我們能夠實現這些功能。

本文，我們將從實際實用角度出發，基于實際的案例，看看 CSS 相對顏色，能夠如何解決我們的一些實際問題。

快速語法入門

首先，我們通過一張圖，一個案例，快速入門 CSS 相對顏色語法：

相對顏色語法的目標是允許從另一種顏色派生顏色。

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

舉個例子：

<p> CSS Relative Color </p>

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

實現一個 color 為紅色（rgb 值為 rgb(255, 0, 0)）的字體：

基于上面的相對顏色語法，我如何通過一個紅色生成綠色文字呢？示意如下：

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

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

解釋一下：

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

通過這個 DEMO，我們把幾個核心基礎語法點學習一下：

from 關鍵字

from 關鍵字，它是相對顏色的核心。它表示會將 from 關鍵字后的顏色定義轉換為相對顏色！在 from 關鍵字后面，CSS 會期待一種顏色，即能夠啟發生成另一種顏色。

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

第二個關鍵點，from 后面通常會接一個顏色值，這個顏色值可以是任意顏色表示法，或者是一個 CSS 變量，下面的寫法都是合法的：

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);
}

對轉換后的變量使用 calc() 或其他 CSS 函數

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

就是我們上面的例子：

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

相對顏色語法支持，各種顏色表示函數：

相對顏色的基礎的使用規則就是這樣，它不僅支持 rgb 顏色表示法，它支持所有的顏色表示法：

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

使用 CSS 相對顏色，實現統一按鈕點擊背景切換

通常頁面上的按鈕，都會有 hover/active 的顏色變化，以增強與用戶的交互。

像是這樣：

最常見的寫法，就是我們需要在 Normal 狀態、Hover 狀態、Active 狀態下寫 3 種顏色：

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

在之前，我們介紹過一種利用濾鏡 filter: contrast() 或者 filter: brightness() 的統一解決方案，無需寫多個顏色值，可以根據 Normal 狀態下的色值，通過濾鏡統一實現更亮、或者更暗的偽類顏色。

在今天，我們也可以利用 CSS 相對顏色來做這個事情：

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));
}

我們通過 hsl 色相、飽和度、亮度顏色表示法表示顏色。實現：

在 :hover 狀態下，根據背景色，將背景亮度 l 調整為原背景色的 1.2 倍
在 :avtive 狀態下，根據背景色，將背景亮度 l 調整為原背景色的 0.8 倍

在實際業務中，這是一個非常有用的用法。

使用 CSS 相對顏色，實現文字顏色自適應背景

相對顏色，還有一個非常有意思的場景 -- 讓文字顏色能夠自適應背景顏色進行展示。

有這么一種場景，有的時候，無法確定文案的背景顏色的最終表現值（因為背景顏色的值可能是后臺配置，通過接口傳給前端），但是，我們又需要能夠讓文字在任何背景顏色下都正常展現（譬如當底色為黑色時文字應該是白色，當背景為白色時，文字應該為黑色）。

像是這樣：

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

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

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

實操過這個方案的同學都會知道，在一定情況下，前景文字顏色還是會有一點瑕疵。并且，混合模式這個方案最大的問題是會影響清晰度。

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

利用 CSS 相對顏色，反轉顏色

我們可以利用相對顏色的能力，基于背景色顏色進行反轉，賦值給 color。

一種方法是將顏色轉換為 RGB，然后從 1 中減去每個通道的值。

代碼非常簡單：

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

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

用 1 去減，而不是用 255 去，是因為此刻，會將 rgb() 表示法中的 0~255 映射到 0~1。

效果如下：

配個動圖，我們利用背景色的反色當 Color 顏色，適配所有背景情況：

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

當然，這個方案還有兩個問題：

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

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

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

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

利用這個 CSS 顏色函數，可以完美的解決上述的問題。

我們只需要提供 #fff 白色和 #000 黑色兩種可選顏色，將這兩種顏色和提供的背景色進行比較，系統會自動選取對比度更高的顏色。

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

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

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

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

此方案的優勢在于：

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

當然，唯一限制這個方案的最大問題在于，當前，color-contrast 還只是一個實驗室功能，未大規模被兼容。

總結一下

到今天，我們可以利用 CSS 提供的各類顏色函數，對顏色有了更為強大的掌控力。

很多交互效果，不借助 JavaScript 的運算，也能計算出我們想要的最終顏色值。本文簡單的借助：

使用 CSS 相對顏色，實現統一按鈕點擊背景切換
使用 CSS 相對顏色，實現文字顏色自適應背景

兩個案例，介紹了 CSS 相對顏色的功能。

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

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

在線咨詢

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

您的項目需求

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

整合營銷服務商