整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
这样一个需求，就是在一个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>这种方式比较适合那种需要给背景图片上添加蒙版的情况，但是笔者尝试的时候，结果实在是不尽人意。所以还是选择了上面的推荐方法，不过这种方式要比上面的那种方式实现起来要简单很多。如下所示。
<!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>这种方式实现会影响到整个的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内部有内容的情况下会影响到整个组件体系的样式。
在实际开发中，我们可以选择合适的方式来实现这个需求。当然还有其他的实现方式，有兴趣的读者可以留言我们一起讨论。
值工具与不透明度。
可以来看一下，比如在这里取了一个颜色，取了这样的紫色，可以在这里去设计软件里面把这个值复制过来，复制了之后在这里去写一下，记得要加一个井号，16进制，这个颜色就会在这里展示出来了。
这个颜色其实可以用vscode自带的调色板工具去切换颜色色值的模式，当点击这里的时候能切换好几种。当去调整透明度的时候会发现后面16进制的多了两位，包括其他的颜色模式也会把它变成a的，加了透明度a字母的模式，RGBA。
这里可以看到这里还有个HWB，这个也是从来没有用过，有兴趣可以自己去研究一下。所以可以点击这里去切换不同的颜色模式，下面的代码的设定也会随之的更改。
当去调整颜色的时候会发现调节的面板颜色就断成了两边，左边这里就是当前调整变成的颜色，右边这里就是调整之前的颜色。如果调完半天之后发现效果不满意，想回到原来那个，可以点击一下就回去了。
有时候如果想用16进制的颜色的写法，但是透明度又感觉不太好设置，其实可以先把它切换为RGBA模式。比如现在一开始这里是16进制的写法，想让它变成20%(不透明度)的颜色，先把鼠标放这里，让颜色色板出现之后先把它转成RGBA的模式，调透明度，调到比如20%的透明度，0.2，再切回去，再切回到这个模式。这个就不就是16进制的带不透明度设置的写法，一个颜色值了。
所以这些小技巧大家都可以去用一下。当然很多时候去给某个颜色设置不透明度相对来说会比较少用，比较常用的去设置不透明度其实很多时候是之前给大家介绍过的，给整个元素用opacity去设置一个不透明度。
比如把它设置到父元素上，不透明度跟颜色的不透明度是有非常大的区别的。不透明度(opacity)是整个元素的整体，包括它的子元素也会受影响的，会看到它整体，包括内部的子元素也好，它的整体变成了很不明显的效果了。
但是颜色的设置只会影响到设置颜色的部分(或者方面)，比如设置不透明度，它只影响到了子元素的背景颜色的不透明度。比如字体，color是给文字设置颜色的，不透明度其实也可以设置，比如把字体的不透明度降到这么低，就会发现字体自己的颜色就会变得不透明度的状态。
比如这里来个red，就明显能感觉到它这些都是对应各自影响的部分去产生作用的。所以有时候如果希望背景颜色有一个不透明度，但是整体的元素不想让它有任何的半透明的效果，就可以通过特定的背景颜色的颜色色值的不透明度的设置达到想要的效果，而不影响到整体的元素。
SS技术分享：粗ps-reduced transparency：降低透明度媒体查询。
分享一下最近看到的一个ado发布的一个scr，降低透明度的新媒体查询功能，就这个preferred reduced transparency，它是一个支持CSS媒体查询，识别到在系统设置这个降低透明度的特性。
比如在系统里面设置降低透明度的时候可以看到如果不开启，默认是这个边栏，菜单栏是有一定透明度的可以很好的和背景融合在一起。如果是开启了就可以看到其实就是一个没有透明度，是打印的一个颜色，就是刚好和ui的主题色是对应的一个白色。
你这个在代码中可以通过最新的、最新的媒体选择器来识别到，来识别到是否有开启了降低透明的效果。这个没查询，比如原来的透明度是0.5，这是一个变量，透明度0.5。如果识别把透明度变成0.95，那么一个盒子的盒子的背景颜色透明度也会进行改变。
·来看结构，首先是有个div，然后下面有个隐秘值，这个隐秘值是绝对定位的，始终保持在左上角的位置。
·然后这个盒子上面这个盒子就是在它的层级的上面是有透明度的，现在我是开启了一个降低透明的效果的。如果把它关闭可以看到透明度是会更透明一点，可以看到底下盒子的内容。
这个是因为这部分逻辑，比如说识别到透明度之后会把透明度的值变成0.95，那么就会变得不那么透明。比如现在是没有开启降低透明度的，它的OPPCITY是0.5，所以可以很清楚的从这里看到下面图片上的内容。如果开启了降低透明，那么这里的值就会变成0.95，这里的值就变成0.95，所以它的背景颜色的值也是0.95，所以就变得没有那么透明。
这就是一个最新发现的cs的新米查询，关于降低透明度的新特性。村望老弟。
*请认真填写需求信息，我们会在24小时内与您取得联系。
