如何将完全透明的div和文字放在半透明的位置
我试图达到以下效果：
我有一个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; 或背景：无; 它仍然是半透明的白色。
尝试background-color CSS属性，对于半透明的尝试rgba（红色，绿色，蓝色，阿尔法）
.transparent{
background-color: transparent; //transparent
}
.semi-transparent{
background-color: rgba(255, 255, 255, 0.5); //semi-transparent white
}