如何将完全透明的div和文字上的半透明背景

example

我有一个背景图像和半透明白色一个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块格是透明。问题是它继承了它的父类的背景，所以即使我设置了background-color：transparent;或背景：无;它仍然是半透明的白色。

来源

2017-02-12 Jonathan Parent

子元素也将具有相同的不透明度为他们的专利（或甚至更多，如果他们有他们自己的不透明度值），你不能覆盖它。您将不得不以不同的不透明度堆叠单独的元素。 – Connum

我相信你正在寻找的是伪元素（':: before'和':: after'）。发布相关的HTML和CSS，以便我们可以进一步帮助您。 – pol

另一种方式呢？在白色背景上使用半透明背景图像？ [CSS技巧 - 透明背景图片]（// css-tricks.com/snippets/css/transparent-background-images/） – Thomas

-1

尝试background-color CSS属性，半透明尝试RGBA（红，绿，蓝，阿尔法）

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

来源

2017-02-12 00:53:34

如何将完全透明的div和文字上的半透明背景

回答

相关问题