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

时间:2017-02-12 00:44:17

标签: javascript html css twitter-bootstrap

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

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-block div是透明的。问题是它继承了其父级的背景,所以即使我设置了background-color:transparent;或背景:无;它仍然是半透明的白色。

1 个答案:

答案 0 :(得分:-1)

尝试background-color CSS属性,半透明尝试rgba(红色,绿色,蓝色,阿尔法)

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