如何将完全透明的 div 和文本放在半透明背景上答案

【问题标题】：How to put fully transparent divs and text on semi-transparent background如何将完全透明的 div 和文本放在半透明背景上
【发布时间】：2017-02-12 00:44:17
【问题描述】：

我正在尝试达到以下效果：

我有一个 div，上面有一个背景图像和一个半透明的白色背景颜色，用作过滤器。

现在，我想添加 div 和一些文本，它们基本上会“绕过”过滤器，因此它们是完全透明的。有没有办法在 css 中，或者在 Javascript 或其他什么中做到这一点？

我正在使用 Bootstrap 和 jQuery，我也对您可能知道的任何可以帮助我的库开放。

编辑：

这是我刚刚制作的小提琴：https://jsfiddle.net/frbkLuoe/

html:

<div class="container">
    <div class="filter">
        <div class="transparent-block"></div>
    </div>
</div>

css:

.container {
    width:300px;
    height:300px;
    background-image:url(http://4.bp.blogspot.com/-RSAdi3NMMs8/VakWj_znRcI/AAAAAAAAAMI/lp19iktRyCw/s1600/Rent%2Broom%2Bstockholm.jpg);
    background-size:cover;
}
.filter {
    width:100%;
    height:100%;
    background-color:rgba(255, 255, 255, 0.7);
}
.transparent-block {
    width:100px;
    height:100px;
    background-color:transparent;
}

我希望 .transparent-block div 是透明的。问题是它继承了其父级的背景，所以即使我设置了 background-color:transparent;或背景：无；它仍然是半透明的白色。

【问题讨论】：

子元素也将具有与其专利相同的不透明度（如果它们有自己的不透明度值，则甚至更多），您不能覆盖它。您必须堆叠具有不同不透明度的单独元素。
我相信您正在寻找的是伪元素（::before 和 ::after）。发布相关的 HTML 和 CSS，以便我们进一步帮助您。
另一种方式怎么样？在白色背景上使用半透明背景图像？ CSS-Tricks - Transparent Background Images
如果这是一个真实的网站，我很惊讶他们诚实地完成了这个；我猜你最好的机会是以某种创造性的方式将画布投入使用。
@pol 我已将我的 html 和 css 添加为编辑。但是我不确定在这种情况下伪元素如何帮助我，你能指出我正确的方向吗？谢谢！

标签： javascript html css twitter-bootstrap

【解决方案1】：

试试background-color CSS 属性，半透明试试 rgba (red, green, blue, alfa)

    .transparent{
      background-color: transparent; //transparent 
    }
    .semi-transparent{
      background-color: rgba(255, 255, 255, 0.5); //semi-transparent white
    }

【讨论】：