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

為Web開發(fā)人員，最常見的事情之一就是更改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模型的哪一部分會受到影響？簡單的答案是填充區(qū)域和內容區(qū)域。讓我們通過一個例子來確認這一點。

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

這將導致：

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

最后，讓我們討論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屬性可以采用的值。

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

天分享的這五個是用于智慧政務輿情分析智慧社區(qū)h5大數(shù)據大屏顯示網站模板，包含了工商辦稅大數(shù)據監(jiān)控平臺，土地交易大數(shù)據可視化平臺，綜合分析平臺等，具體得查看下面具體的說明，喜歡請轉發(fā)，私信我獲取下載地址。

一.工商辦稅大數(shù)據監(jiān)控平臺模板

基于echars某某市某某區(qū)辦稅渠道運行狀態(tài)大數(shù)據監(jiān)控平臺管理頁面模板。工商行政辦稅服務數(shù)據統(tǒng)計投屏網頁模板。

二.土地交易大數(shù)據可視化平臺模板

科技、星空背景數(shù)據可視化后臺管理頁面，大數(shù)據統(tǒng)計后臺首頁，數(shù)據概覽頁面、后臺管理、echarts、動態(tài)數(shù)字增長、css3循環(huán)滾動

三.輿情分析h5大屏模板

html5炫酷的大數(shù)據統(tǒng)計界面模板，輿情分析管理系統(tǒng)頁面，公安監(jiān)控大數(shù)據系統(tǒng)。基于echarts統(tǒng)計圖表，警情警力分析、人口分析、人口活動情況、輿情分析、交通情況監(jiān)測分析等5個頁面ui模板。

四.智慧社區(qū)h5大屏模板

基于html5 echarts實現(xiàn)的智慧小區(qū)大數(shù)據分析平臺前端頁面，智慧物業(yè)/智慧停車/社區(qū)電商/安防設備/設備報修及投訴建議大數(shù)據統(tǒng)計頁面模板。

五.h5綜合分析平臺大屏模板

漂亮的大數(shù)據統(tǒng)計分析HTML頁面，藍色科技范大屏系統(tǒng)管理界面模板，通用的大數(shù)據展示主頁模板html5下載。

下載方法：轉發(fā)關注，私信我。

歡迎關注云碼素材，交流分享! 云碼素材原創(chuàng)作品，更多精品資源下載，技術分享請關注，私信云碼素材！


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css屬性</title>


    <style>
        <!-- p{ -->
            <!-- color: #FF0000; -->
            <!-- font-size: 30px; -->
            <!-- text-align: center; -->
            <!-- line-height: 200px; -->
            <!-- /* -->
                <!-- border 邊框 -->
             <!-- */ -->
            <!-- border: 1px solid red; -->

        <!-- } -->
        div{
            border: 1px solid red;
            /*
                尺寸
             */
            height: 1482px;
            width: 1000px;
            /*
                背景
             */
            background: url("image/1.jpg") no-repeat center;
        }
		p{
			color:red;
			font-size:13px;
			font-family:'楷體';
		}
    </style>
</head>
<body>
	<!-- <p>你好</P> -->
    <div><p>你是我得不到的女孩</p>
  </div>
</body>
</html>

在線咨詢

上一篇：html 文本輸入框效果大匯集
下一篇：HTML：可能會用到的元素，整理好不用再找

您的項目需求

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

整合營銷服務商