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ì)您有所幫助。謝謝閱讀。

片

一、圖片的表現(xiàn)形式

當(dāng)我們?cè)谥谱黜?yè)面的時(shí)候，通常會(huì)遇到圖片的三種表現(xiàn)形式，如下：

1、內(nèi)容圖片

內(nèi)容圖片是頁(yè)面中真正的內(nèi)容，沒(méi)有內(nèi)容圖片，就無(wú)法完整的理解頁(yè)面內(nèi)容。如淘寶網(wǎng)上的商品展示圖片，這些圖片是網(wǎng)頁(yè)的一部分，它們能幫助你決定這個(gè)頁(yè)面的內(nèi)容是否是你需要的。

內(nèi)容圖片

2、布局圖片

布局圖片出現(xiàn)在頁(yè)面背景中，要想理解頁(yè)面的內(nèi)容，它們不是必須的。如蘋(píng)果官網(wǎng)的這個(gè)圖片，沒(méi)有這個(gè)圖片也能理解頁(yè)面上文字描述的內(nèi)容是什么意思。

布局圖片

3、交互圖片

圖中用紅色框起來(lái)的圖片會(huì)給你瀏覽頁(yè)面的時(shí)候帶來(lái)一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購(gòu)物車圖片可以看到選購(gòu)的產(chǎn)品，箭頭圖片點(diǎn)擊可以看到更詳細(xì)的產(chǎn)品等。

交互圖片

二、創(chuàng)建內(nèi)容圖片

在HTML中我們用 img 標(biāo)簽創(chuàng)建圖片，英文是image的縮寫(xiě)。

<img src="" alt="">

內(nèi)容圖片

img是空標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽
src屬性的值是一個(gè)圖片的URL地址，地址可以是相對(duì)路徑，也可以是絕對(duì)路徑
alt屬性：填寫(xiě)對(duì)這張圖片的簡(jiǎn)單描述，增加圖片的可訪問(wèn)性
圖片應(yīng)該被存放在單獨(dú)的文件夾中，如：images文件夾

三、創(chuàng)建布局圖片

布局圖片是在CSS中被創(chuàng)建出來(lái)的，使用CSS中的background屬性，如：

1）background-color 定義背景顏色，設(shè)置背景圖片時(shí)，要始終設(shè)置背景顏色，確保背景圖片沒(méi)有成功時(shí)會(huì)顯示一個(gè)背景顏色

2）background-image 可以指向一個(gè)相對(duì)路徑或者絕對(duì)路徑來(lái)添加圖片。

3）background-repeat可以設(shè)置背景是否平鋪在容器中，包含四個(gè)關(guān)鍵字：

background-repeat：repeat 可以設(shè)置背景圖片橫向和縱向都平鋪。
background-repeat：no-repeat 設(shè)置圖片不平鋪，圖片默認(rèn)顯示在容器的左上角
background-repeat：repeat-x 設(shè)置圖片只能在橫向平鋪
background-repeat：repeat-y 設(shè)置圖片只能在縱向平鋪

4）background-position 屬性可以控制背景圖片顯示在什么位置，包含兩個(gè)關(guān)鍵字，如：

background-position：top left 設(shè)置圖片顯示在容器的左上角，第一個(gè)關(guān)鍵字可以是top、center、bottom，第二個(gè)關(guān)鍵字可以是left、center、right

CSS中和背景相關(guān)的屬性可以簡(jiǎn)寫(xiě)在一行中，如：

background: #FF1298 url(images/logo.png) center right no-repeat;

首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡(jiǎn)寫(xiě)就盡量用簡(jiǎn)寫(xiě)，簡(jiǎn)寫(xiě)比分開(kāi)寫(xiě)性能更高。

布局圖片

四、創(chuàng)建用戶交互圖片

Web上最常用的三種圖像格式

1）Jpeg 可以展示一張照片或者復(fù)雜圖像

可以表示多達(dá)1600萬(wàn)種顏色，即所有的十六進(jìn)制顏色
不支持圖像透明
不支持動(dòng)畫(huà)
擴(kuò)展名為.jpg或.jpeg

2）png最適合展示網(wǎng)頁(yè)插畫(huà)、logo和網(wǎng)頁(yè)小圖標(biāo)

可以表示上百萬(wàn)種不同顏色的圖像
包括png-8、png-24和png-32，取決于想表示多少種顏色
可以設(shè)置顏色透明
不支持動(dòng)畫(huà)
擴(kuò)展名為.png

3）gif適合展示網(wǎng)頁(yè)插畫(huà)、logo和網(wǎng)頁(yè)小圖標(biāo)

可以表示最多256種不同顏色
可以設(shè)置顏色透明
支持動(dòng)畫(huà)
擴(kuò)展名是.gif

建議：

復(fù)雜顏色的圖像和照片則要使用jpeg格式
動(dòng)態(tài)圖像要使用gif格式
png格式的透明圖片要比gif格式的更平滑
這三種圖像相對(duì)于其他格式的圖像文件比較小，適合web頁(yè)面高效展示

一般情況下用戶交互圖片都是一些小圖標(biāo)，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網(wǎng)頁(yè)添加用戶交互圖片；推薦把用戶交互圖片放在同一個(gè)文件中，可以提高網(wǎng)絡(luò)和服務(wù)器性能，如：

交互圖片

具體如何操作呢？后續(xù)教頭會(huì)通過(guò)視頻給大家詳細(xì)演示，請(qǐng)繼續(xù)關(guān)注。

文將介紹一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相關(guān)屬性，制作一些稍微復(fù)雜、酷炫的背景。

通過(guò)本文，你將會(huì)了解到 CSS background 中更為強(qiáng)大的一些用法，并且學(xué)會(huì)利用 background 相關(guān)的一些屬性，采用不同的方式，去創(chuàng)造更復(fù)雜的背景圖案。在這個(gè)過(guò)程中，你會(huì)更好的掌握不同的漸變技巧，更深層次的理解各種不同的漸變。

同時(shí)，借助強(qiáng)大的 CSS-Doodle，你將學(xué)會(huì)如何運(yùn)用一套規(guī)則，快速創(chuàng)建大量不同的隨機(jī)圖案，感受 CSS 的強(qiáng)大，走進(jìn) CSS 的美。

背景基礎(chǔ)知識(shí)

我們都知道，CSS 中的 background 是非常強(qiáng)大的。

首先，復(fù)習(xí)一下基礎(chǔ)，在日常中，我們使用最多的應(yīng)該就是下面 4 種：

純色背景 background: #000：

線性漸變 background: linear-gradient(#fff, #000) :

徑向漸變 background: radial-gradient(#fff, #000) :

角向漸變 background: conic-gradient(#fff, #000) :

背景進(jìn)階

當(dāng)然。掌握了基本的漸變之后，我們開(kāi)始向更復(fù)雜的背景圖案進(jìn)發(fā)。我最早是在《CSS Secret》一書(shū)中接觸學(xué)習(xí)到使用漸變?nèi)?shí)現(xiàn)各種背景圖案的。然后就是不斷的摸索嘗試，總結(jié)出了一些經(jīng)驗(yàn)。

在嘗試使用漸變?nèi)ブ谱鞲鼜?fù)雜的背景之前，列出一些比較重要的技巧點(diǎn)：

漸變不僅僅只能是單個(gè)的 linear-gradient 或者單個(gè)的 radial-gradient，對(duì)于 background 而言，它是支持多重漸變的疊加的，一點(diǎn)非常重要；
靈活使用 repeating-linear-gradeint（repeating-radial-gradeint），它能減少很多代碼量
transparent 透明無(wú)處不在
嘗試 mix-blend-mode 與 mask，創(chuàng)建復(fù)雜圖案的靈魂
使用隨機(jī)變量，它能讓一個(gè) idea 變成無(wú)數(shù)美麗的圖案

接下來(lái)，開(kāi)始組合之旅。

使用 mix-blend-mode

mix-blend-mode ，混合模式。最常見(jiàn)于 photoshop 中，是 PS 中十分強(qiáng)大的功能之一。在 CSS 中，我們可以利用混合模式將多個(gè)圖層混合得到一個(gè)新的效果。

關(guān)于混合模式的一些基礎(chǔ)用法，你可以參考我的這幾篇文章：

不可思議的顏色混合模式 mix-blend-mode
不可思議的混合模式 background-blend-mode

然后，我們來(lái)嘗試第一個(gè)圖案，先簡(jiǎn)單體會(huì)一下 mix-blend-mode 的作用。

我們使用 repeating-linear-gradient 重復(fù)線性漸變，制作兩個(gè)角度相反的背景條紋圖。正常而言，不使用混合模式，將兩個(gè)圖案疊加在一起，看看會(huì)發(fā)生什么。

額，會(huì)發(fā)生什么就有鬼了:sweat_smile: 。顯而易見(jiàn)，由于圖案不是透明的，疊加在一起之后，由于層疊的關(guān)系，只能看到其中一張圖。

好，在這個(gè)基礎(chǔ)上，我們給最上層的圖案，添加 mix-blend-mode: multiply，再來(lái)一次，看看這次會(huì)發(fā)生什么。

可以看到，添加了混合模式之后，兩張背景圖通過(guò)某種算法疊加在了一起，展現(xiàn)出了非常漂亮的圖案效果，也正是我們想要的效果。

CodePen Demo - Repeating-linear-gradient background & mix-blend-mode

嘗試不同的 mix-blend-mode

那為什么上面使用的是 mix-blend-mode: multiply 呢？用其他混合模式可以不可以？

當(dāng)然可以。這里僅僅只是一個(gè)示例，mix-blend-mode: multiply 在 PS 中意為正片疊底，屬于圖層混合模式的變暗模式組之一。

我們使用上面的 DEMO，嘗試其他的混合模式，可以得到不同的效果。

可以看到，不同的混合模式的疊加，效果相差非常之大。當(dāng)然，運(yùn)用不同的混合模式，我們也就可以創(chuàng)造出效果各異的圖案。

CodePen Demo - Repeating-linear-gradient background & mix-blend-mode

借助 CSS-Doodle 隨機(jī)生成圖案

到這，就不得不引出一個(gè)寫(xiě) CSS 的神器 -- CSS-Doodle，我在其他非常多文章中也多次提到過(guò) CSS-doodle，簡(jiǎn)單而言，它是一個(gè)基于 Web-Component 的庫(kù)。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁(yè)面，并且提供各種便捷的指令及函數(shù)（隨機(jī)、循環(huán)等等），讓我們能通過(guò)一套規(guī)則，得到不同 CSS 效果。

還是以上面的 DEMO 作為示例，我們將 repeating-linear-gradient 生成的重復(fù)條紋背景的顏色、粗細(xì)、角度隨機(jī)化、采用的混合模式也是隨機(jī)選取，然后利用 CSS-Doodle，快速隨機(jī)的創(chuàng)建各種基于此規(guī)則的圖案：

可以點(diǎn)進(jìn)去嘗試一下，點(diǎn)擊鼠標(biāo)即可隨機(jī)生成不同的效果：

CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background

嘗試使用徑向漸變

當(dāng)然，上面使用的是線性漸變，同樣，我們也可以使用徑向漸變運(yùn)用同樣的套路。

我們可以使用徑向漸變，生成多重的徑向漸變。像是這樣：

給圖片應(yīng)用上 background-size，它就會(huì)像是這樣：

像上文一樣，我們稍微對(duì)這個(gè)圖形變形一下，然后疊加兩個(gè)圖層，給最上層的圖形，添加 CSS 樣式 mix-blend-mode: darken：

CodePen Demo -- radial-gradient & mix-blend-mode Demo

借助 CSS-Doodle 隨機(jī)生成圖案

再來(lái)一次，我們使用 CSS-Doodle，運(yùn)用上述的規(guī)則在徑向漸變，也可以得到一系列有意思的背景圖。

可以點(diǎn)進(jìn)去嘗試一下，點(diǎn)擊鼠標(biāo)即可隨機(jī)生成不同的效果：

CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background 2

當(dāng)然，上述的疊加都是非常簡(jiǎn)單的圖案的疊加，但是掌握了這個(gè)原理之后，就可以自己嘗試，去創(chuàng)造更復(fù)雜的融合。:dog:

上述的疊加效果是基于大片大片的實(shí)色的疊加，當(dāng)然 mix-blend-mode 還能和真正的漸變碰撞出更多的火花。

在不同的漸變背景中運(yùn)用混合模式

在不同的漸變背景中運(yùn)用混合模式？那會(huì)產(chǎn)生什么樣美妙的效果呢？

運(yùn)用得當(dāng)，它可能會(huì)像是這樣：

umm，與上面的條紋圖案完全不一樣的風(fēng)格。

你可以戳進(jìn) gradienta.io 來(lái)看看，這里全是使用 CSS 創(chuàng)建的漸變疊加的背景圖案庫(kù)。

使用混合模式疊加不同的漸變圖案

下面，我們也來(lái)實(shí)現(xiàn)一個(gè)。

首先，我們使用線性漸變或者徑向漸變，隨意創(chuàng)建幾個(gè)漸變圖案，如下所示：

接著，我們兩兩之間，從第二層開(kāi)始，使用一個(gè)混合模式進(jìn)行疊加，一共需要設(shè)定 5 個(gè)混合模式，這里我使用了 overlay, multiply, difference, difference, overlay。看看疊加之后的效果，非常的 Nice：

CodePen Demo -- Graideint background mix

由于上面動(dòng)圖 GIF 的壓縮率非常高，所以看上去鋸齒很明顯圖像很模糊，你可以點(diǎn)進(jìn)上面的鏈接看看。

然后，我們可以再給疊加后的圖像再加上一個(gè) filter: hue-rotate()，讓他動(dòng)起來(lái)，放大一點(diǎn)點(diǎn)看看效果，絢麗奪目的光影效果：

CodePen Demo -- Graideint background mix 2

借助 CSS-Doodle 隨機(jī)生成圖案

噔噔噔，沒(méi)錯(cuò)，這里我們又可以繼續(xù)把 CSS-Doodle 搬出來(lái)了。

隨機(jī)的漸變，隨機(jī)的混合模式，疊加在一起，燥起來(lái)吧。

使用 CSS-Doodle 隨機(jī)創(chuàng)建不同的漸變，在隨機(jī)使用不同的混合模式，讓他們疊加在一起，看看效果：

當(dāng)然，由于是完全隨機(jī)生成的效果，所以部分時(shí)候生成出來(lái)的不算太好看或者直接是純色的。不過(guò)大部分還是挺不錯(cuò)的 :joy:

CodePen Demo -- CSS Doodle Mix Gradient

感謝堅(jiān)持，看到這里。

上述上半部分主要使用的混合模式。

關(guān)注我看下半部分，將主要使用 mask

精彩繼續(xù)~

在線咨詢

上一篇：為HTML頁(yè)面添加視頻、音頻的方法-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
下一篇：基于HTML5 構(gòu)建的 Web端現(xiàn)代化PDF在線預(yù)覽插件-PDF.js

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商