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

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

trokeRect(x,y,width,height) 只繪制邊框但沒有填充

strokeRect()與fillRect()參數都相同,只是fillRect()方法繪制的是填充顏色的矩形;而strokeRect()方法繪制的是只有邊框的矩形。

實例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>繪制矩形</title>
<script type="text/javascript">
function drawRect(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "006633";
ctx.strokeRect(200,50,100,80);
}
</script>
<style type="text/css">
myCanvas{border:1px solid black;}
</style>
</head>
<body>
<input type="button" value="繪制矩形" onclick="drawRect()"/><br />
<canvas id="myCanvas"></canvas>
</body>
</html>

繪制調色板

明

在Canvas中繪制了多個矩形（位置互不重疊），點擊矩形在矩形右側彈出操作框，操作框內含有多個狀態操作按鈕，點擊狀態操作按鈕后修改對應的矩形的背景色為與狀態對應的顏色。

思路

1、使用數組存儲多個矩形的信息，矩形信息中包含ID、位置、寬高、狀態、文本，遍歷數組繪制多個矩形；

2、給整個Canvas元素綁定單擊事件，獲取鼠標單擊的位置信息；

3、遍歷矩形數組，獲取鼠標點中的矩形；如果有點中矩形，則在矩形右側顯示狀態操作框，并將點中的矩形賦值給全局變量target；如果沒有點中矩形且狀態操作框處于顯示狀態則隱藏狀態操作框；

4、點擊狀態操作按鈕，遍歷矩形數組修改與全局變量target的ID相同的矩形的狀態；

5、遍歷矩形數組重新繪制所有矩形。

實現步驟

1、創建文件骨架，引入 jquery；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Canvas</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
      // ...
    </script>
  </body>
</html>

2、全局變量

// 獲取 Canvas 對象
var canvas = document.getElementById("canvas");
// 獲取上下文環境對象
var ctx = canvas.getContext("2d");

// 狀態與矩形背景色映射關系
var statusStyleMap = {
  0: "#fffbf0",
  1: "#45C552",
  2: "#F45454",
  3: "#FFE960",
  4: "#5EB1FF",
};

// 需要繪制的矩形信息列表，含ID、坐標位置、寬度、高度、狀態
var rectList = [
  {
    id: 1,
    x: 50,
    y: 50,
    width: 200,
    height: 30,
    status: 0,
  },
  {
    id: 2,
    x: 200,
    y: 100,
    width: 200,
    height: 30,
    status: 0,
  },
];

// 當前點中的矩形
var targetRect = null;

全局變量中我們定義了Canvas對象、上下文環境對象、狀態與矩形背景色映射關系、需要繪制的矩形信息列表、當前點中的矩形。

3、定義繪制矩形的方法

// 繪制矩形
function drawRect(rect) {
  ctx.strokeStyle = "#FDCC6B";
  ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
  
  var fileStyle = statusStyleMap[rect.status];
  ctx.fillStyle = fileStyle;
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
  
  // 繪制文本
  ctx.textAlign = "left";
  ctx.fillStyle = "#333333";
  ctx.font = "18px 'Microsoft YaHei'";
  //
  ctx.fillText("Click Me.", rect.x + 10, rect.y + 18 + 4);
  
  ctx.stroke();
}

頁面加載完成后初始繪制所有矩形。

$(function () {
  // 初始繪制矩形
  for (var i = 0; i < rectList.length; i++) {
    drawRect(rectList[i]);
  }
});

所有矩形成功渲染后的效果圖如下：

4、Canvas元素單擊事件處理

// 畫布點擊事件綁定、處理
canvas.onclick = function (e) {
  console.log("## canvas click ##");
  // 控制臺打印點擊位置坐標信息
  console.log("x: " + e.offsetX + ", y: " + e.offsetY);
  // 獲取點擊的矩形
  var target = rectList.find((item, index) => {
    return (
      e.offsetX >= item.x &&
      e.offsetX <= item.x + item.width &&
      e.offsetY >= item.y &&
      e.offsetY <= item.y + item.height
    );
  });
  // 如果獲取到了矩形信息
  if (target) {
    targetRect = target;
    // 設置狀態操作區位置
    $(".item-operations").css({
      position: "absolute",
      top: targetRect.y + $("#canvas").offset().top + "px",
      left:
        targetRect.x +
        targetRect.width +
        $("#canvas").offset().left +
        "px",
    });
    // 顯示狀態操作區
    $(".item-operations").show();
  } else {
    // 如果點擊的是畫布其它位置（非矩形上）則清空選中的矩形、隱藏狀態操作區
    targetRect = null;
    $(".item-operations").hide();
  }
};

Canvas中的矩形點擊之后的效果圖如下：

5、狀態操作按鈕單擊事件處理

// 狀態操作按鈕單擊事件綁定、處理
$(".item-operations li").click(function () {
  console.log("## operation click ##");
  var targetStatus = $(this).attr("data-status");
  targetRect.status = targetStatus;
  for (var i = 0; i < rectList.length; i++) {
    if (rectList[i].id === targetRect.id) {
      rectList[i].status = targetRect.status;
    }
    console.log("id: " + targetRect.id);
    console.log(rectList[i]);
    drawRect(rectList[i]);
  }
  $(".item-operations").hide();
});

選擇狀態后的效果圖如下：

完整代碼：

在線咨詢

上一篇：技術貼：一篇文章看懂鏈接（超鏈接）設計
下一篇：css3實現循環執行動畫，且動畫每次都有延遲

您的項目需求

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

整合營銷服務商