How to put fully transparent divs and text on semi
I'm trying to achieve the following effect:
I have a div with a background-image and a semi-transparent white background-color on top of it which acts as a filter.
Now, I want to add divs and some text which would basically "bypass" the filter so they are fully transparent. Is there a way to do this in css, or perhaps in Javascript or whatever?
I am using Bootstrap and jQuery, I'm also open to any libraries you might know that could help me here.
Edit:
Here's a fiddle I just made: 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;
}
I want the .transparent-block div to be transparent. The problem is it inherits the background of its parent, so even if I set background-color:transparent; or background:none; it's still semi-transparent white.
尝试background-color CSS属性，对于半透明的尝试rgba（红色，绿色，蓝色，阿尔法）
.transparent{
background-color: transparent; //transparent
}
.semi-transparent{
background-color: rgba(255, 255, 255, 0.5); //semi-transparent white
}
上一篇: CSS背景不透明