如何html使用 CSS 降低元素背景的不透明度？

如何使用 CSS 降低元素背景的不透明度？

我正在使用类似于以下代码的内容：

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

我希望这使背景具有 0.4 的不透明度，文本具有 100% 的不透明度。相反，它们的不透明度均为 0.4。

分割线

网友回答：

子项继承不透明度。如果他们不这样做，那将是奇怪和不方便的。

您可以使用半透明的 PNG 文件作为背景图像，或使用 RGBa（a 表示 alpha）颜色作为背景颜色。

例如，50% 褪色的黑色背景：

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

分割线

网友回答：

您可以使用伪元素或获取半透明背景，只需一个容器即可完成此操作。使用类似这样的东西：::before::after

<article>
  Text.
</article>

然后应用一些 CSS：

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

例：

body {
  background: red;
}

article {
  position: relative;
  z-index: 1;
}

article:before {
  content: " ";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100px;  
  opacity: .4; 
  z-index: -1;
  background: url(https://31.media.tumblr.com/8ec07e49f33088c2e32c158ca4262eb2/tumblr_n5wav6Tz4R1st5lhmo1_1280.jpg);
}

<article>
  Text.
</article>

注意：您可能需要调整这些值。z-index

分割线

网友回答：

以下方法可用于解决您的问题：

CSS alpha 透明方法（在 Internet Explorer 8 中不起作用）：
```
#div{background-color:rgba(255,0,0,0.5);}
```
根据您的选择使用透明的 PNG 图像作为背景。

使用以下 CSS 代码片段创建跨浏览器的 alpha 透明背景。下面是一个不透明度为 @ 0.4% 的示例#000000

.div {
    background:rgb(0,0,0);
    background: transparent9;
    background:rgba(0,0,0,0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
    zoom: 1;
}
.div:nth-child(n) {
    filter: none;
}

有关此技术的更多详细信息，请参阅此内容，其中包含一个在线CSS生成器。

模板简介：该模板名称为【如何html使用 CSS 降低元素背景的不透明度？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。