基本 CSS - 如何在顶部覆盖带有半透明 DIV 的 DIV

Posted 2023-03-05

【中文标题】基本 CSS - 如何在顶部覆盖带有半透明 DIV 的 DIV

【英文标题】：Basic CSS - how to overlay a DIV with semi-transparent DIV on top

【发布时间】：2013-07-25 11:06:12

【问题描述】：

我正在努力在我的浏览器 (Chrome) 中进行此渲染。我有一个包含 html 的所有元素的包装器，我想要一个包含图像的 DIV（我们称之为 div-1），并且在它的左侧有一个覆盖 div，就像我在这个图片...有什么快速的解决方案吗？

【参考方案1】：

这是一个纯 CSS 解决方案，类似于 DarkBee 的答案，但不需要额外的 .wrapper div：

.dimmed 
  position: relative;


.dimmed:after 
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);

我这里使用的是 rgba，当然你也可以使用其他的透明方式，如果你喜欢的话。

【讨论】：

@marcvangend 解决方案有效，但如果有一个可滚动的 div 而不是图像，我们还能允许滚动工作吗？

@Onkar 您可以尝试将pointer-events: none; 添加到.dimmed:after 选择器。另见***.com/questions/1009753/…。请让我们知道它是否适用于这个特定的用例。

太棒了。如果要点击进入底层元素，请添加规则 pointer-events: none;到后元素 css 规则

【参考方案2】：

使用 CSS3，您无需使用透明度制作自己的图像。

只要有一个 div 就可以了

position:absolute;
left:0;
background: rgba(255,255,255,.5);

背景中的最后一个参数 (.5) 是透明度（数字越大越不透明）。

Example Fiddle

【参考方案3】：

.foo 
   position : relative;

.foo .wrapper 
    background-image : url('semi-trans.png');
    z-index : 10;
    position : absolute;
    top : 0;
    left : 0;


<div class="foo">
   <img src="example.png" />
   <div class="wrapper">&nbsp;</div>
</div>

【讨论】：

可能想将top:0; left: 0; 添加到.wrapper

确实如此。改了

另外，如果图像还不是透明的，opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */

PS - 不建议使用 rgba，我看到你使用透明 png...这是由于 Internet Explorer，对吧？

是的，支持无法处理 CSS3 的旧版浏览器

【参考方案4】：

对于 div 元素，您可以通过一个类设置不透明度来启用或禁用效果。

.mute-all 
   opacity: 0.4;

【参考方案5】：

就像之前的答案一样，但我会放 ::before，只是为了堆叠。如果你想在覆盖层上包含文本（一个常见的用例），使用 ::before 应该可以解决这个问题。

.dimmed 
  position: relative;


.dimmed:before 
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);