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小时内与您取得联系。

整合营销服务商