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

Question

我正在尝试实现以下效果：

我有一个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; 或背景：无； 它仍然是半透明的白色。

Answer 1

尝试使用background-color CSS属性，对于半透明，请尝试使用rgba（红色，绿色，蓝色，阿尔法）

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