CSS透明度效果科尔多瓦

【问题标题】：css transparency effect cordovaCSS透明度效果科尔多瓦
【发布时间】：2015-10-12 09:34:42
【问题描述】：

我有一个带有背景图片的容器DIV。在这个 div 中，我有三个带有一些文本的 div，我想要实现的目标如下：

三个 div 应该是透明的，带有一些颜色过滤器，所以我有背景图像，比如说透明的红色过滤器或任何颜色。我的 html 是：

<div id="contenuto">
    <div id="schermata1">
        <h3 >Schermata soggetti</h3>
    </div>
    <div id="schermata2">
        <h3>Schermata due</h3>
    </div>
    <div id="schermata3">
        <h3 >Schermata tre</h3>
    </div>
</div>

【问题讨论】：

标签： html css cordova

【解决方案1】：

你可以这样做：

CSS

.filter{
    display: block;
    position: relative;
}
.filter:before{
    display: block;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    content:"";
    background: rgba(255,255,255,0.4);
}

HTML

<div id="contenuto">
    <div id="schermata1" class="filter">       
<h3>Schermata soggetti</h3>
    </div>
    <div id="schermata2" class="filter">      
<h3>Schermata due</h3>
    </div>
    <div id="schermata3" class="filter">        
<h3>Schermata tre</h3>
    </div>
</div>

DEMO HERE

【讨论】：

我尝试使用 opacity 属性...但是通过这种方式，我的文本具有透明的文本...即使我为文本设置了 opacity:1 属性