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

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

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

實(shí)例：

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

繪制調(diào)色板

明

在Canvas中繪制了多個(gè)矩形（位置互不重疊），點(diǎn)擊矩形在矩形右側(cè)彈出操作框，操作框內(nèi)含有多個(gè)狀態(tài)操作按鈕，點(diǎn)擊狀態(tài)操作按鈕后修改對(duì)應(yīng)的矩形的背景色為與狀態(tài)對(duì)應(yīng)的顏色。

思路

1、使用數(shù)組存儲(chǔ)多個(gè)矩形的信息，矩形信息中包含ID、位置、寬高、狀態(tài)、文本，遍歷數(shù)組繪制多個(gè)矩形；

2、給整個(gè)Canvas元素綁定單擊事件，獲取鼠標(biāo)單擊的位置信息；

3、遍歷矩形數(shù)組，獲取鼠標(biāo)點(diǎn)中的矩形；如果有點(diǎn)中矩形，則在矩形右側(cè)顯示狀態(tài)操作框，并將點(diǎn)中的矩形賦值給全局變量target；如果沒(méi)有點(diǎn)中矩形且狀態(tài)操作框處于顯示狀態(tài)則隱藏狀態(tài)操作框；

4、點(diǎn)擊狀態(tài)操作按鈕，遍歷矩形數(shù)組修改與全局變量target的ID相同的矩形的狀態(tài)；

5、遍歷矩形數(shù)組重新繪制所有矩形。

實(shí)現(xiàn)步驟

1、創(chuàng)建文件骨架，引入 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 對(duì)象
var canvas = document.getElementById("canvas");
// 獲取上下文環(huán)境對(duì)象
var ctx = canvas.getContext("2d");

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

// 需要繪制的矩形信息列表，含ID、坐標(biāo)位置、寬度、高度、狀態(tài)
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,
  },
];

// 當(dāng)前點(diǎn)中的矩形
var targetRect = null;

全局變量中我們定義了Canvas對(duì)象、上下文環(huán)境對(duì)象、狀態(tài)與矩形背景色映射關(guān)系、需要繪制的矩形信息列表、當(dāng)前點(diǎn)中的矩形。

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

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

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

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

4、Canvas元素單擊事件處理

// 畫(huà)布點(diǎn)擊事件綁定、處理
canvas.onclick = function (e) {
  console.log("## canvas click ##");
  // 控制臺(tái)打印點(diǎn)擊位置坐標(biāo)信息
  console.log("x: " + e.offsetX + ", y: " + e.offsetY);
  // 獲取點(diǎn)擊的矩形
  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;
    // 設(shè)置狀態(tài)操作區(qū)位置
    $(".item-operations").css({
      position: "absolute",
      top: targetRect.y + $("#canvas").offset().top + "px",
      left:
        targetRect.x +
        targetRect.width +
        $("#canvas").offset().left +
        "px",
    });
    // 顯示狀態(tài)操作區(qū)
    $(".item-operations").show();
  } else {
    // 如果點(diǎn)擊的是畫(huà)布其它位置（非矩形上）則清空選中的矩形、隱藏狀態(tài)操作區(qū)
    targetRect = null;
    $(".item-operations").hide();
  }
};

Canvas中的矩形點(diǎn)擊之后的效果圖如下：

5、狀態(tài)操作按鈕單擊事件處理

// 狀態(tài)操作按鈕單擊事件綁定、處理
$(".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();
});

選擇狀態(tài)后的效果圖如下：

完整代碼：

在線咨詢

上一篇：技術(shù)貼：一篇文章看懂鏈接（超鏈接）設(shè)計(jì)
下一篇：css3實(shí)現(xiàn)循環(huán)執(zhí)行動(dòng)畫(huà)，且動(dòng)畫(huà)每次都有延遲

您的項(xiàng)目需求

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

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