HTML如何设置div背景图片的的透明度

这样一个需求，就是在一个DIV中包含有一个Image标签，但是在Div标签中包含有一张背景图片，设计图上的样子是这张背景图片是有一个透明度的，但是如果直接使用opacity属性设置的的话就会连Div中的内容的透明度也会受到影响，那么我们如何在HTML中设置div背景图片的透明度呢？，可以通过以下几种方法实现。

方法一：使用伪元素

这是在日常开发中被推荐使用的方法，通过这种方式实现不会影响到div中的其他内容的透明度只会影响它自己背景的透明度，详细实现如下。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .container::before {
            content: "";
            background-image: url('your-image.jpg');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* 调整透明度 */
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            这里是内容
        </div>
    </div>
</body>
</html>

方法二：使用RGBA颜色叠加

这种方式比较适合那种需要给背景图片上添加蒙版的情况，但是笔者尝试的时候，结果实在是不尽人意。所以还是选择了上面的推荐方法，不过这种方式要比上面的那种方式实现起来要简单很多。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        这里是内容
    </div>
</body>
</html>

方法三：使用CSS滤镜

这种方式实现会影响到整个的div的样式，也就是说页面中的内容的透明度也会受到影响，并且这种影响不会被其他样式所改变。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: url('your-image.jpg') no-repeat center center;
            background-size: cover;
            filter: opacity(0.5); /* 调整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        这里是内容
    </div>
</body>
</html>

以上就是实现如何调整div的背景透明度，在一些特殊场景中我们还可以通过JS的方式来实现。上面的方法中，推荐使用的是伪元素方法，因为它在修改了div背景透明度之后，并不会影响到其他的元素，RGBA色彩添加则是局限于一些色彩华丽的地方使用，而对于一些单色调的内容来讲这种方式实现效果不是太好。通过CSS过滤样式，虽然是最直接的方式，但是如果在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属性可以采用的值。

希望本文对您有所帮助。谢谢阅读。

果在图片上显示文字，经常会遇到这个情况，就是当文字和背景颜色差不多时，文字会看不清楚，我们一般通过给文字加text shadow或者修改图片的透明度来让文字显示更加突出。我们今天说一下透明度的问题，一般我们干这个活儿是通过photoshop来做，其实CSS本身也可以实现类似的效果。如何做？

咱们先从下面这个例子开始，有一张背景图片，上面有些文字：

对应的显示效果如下：

可以看到，文字显示不是特别清晰，现在要给图片增加一层控制透明度，我们使用伪元素实现：

可以看到，加入了一层，inset是top, bottom, left, right的简写形式，将它们都设为0。通过这个设置，显示效果如下：

现在它把所有元素都盖住了，而我们需要文字在这层的上面，如果加入z-index:-1, 则这个层又跑到所有元素下面，看不到了。

要解决这个问题，我们需要引入一个关键CSS，isolation: isolate; 通过它来创建一个新的CSS堆叠上下文，从而使得这个层不会跑到外面，具体关于isolation, 我专门写过一个文章，这里可以直接查看详细信息：使用isolation: isolate来创建堆叠上下文

可以看到，这个层现在位于文字和图片中间，如下所示：

那现在就简单了，可以更改opacity来控制其透明度，

最后将颜色改为黑色，就达到了我们所期望的效果。

附上完整的CSS：

感谢阅读！

在线咨询

上一篇：HTML实战二：html基础模版以及初始化文件创建
下一篇：「前端骚操作」移动端H5页面上传图片或多张图片

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商