css - CSS - 主要内容有图案，子元素需要透明

Question

代码：

<div id="slider_footer">

    <div class="slider_tabs container clearfix" >

        <span role="winter" class="current">
            <div class="slider_tabs_naslov">Zima</div>
            <div class="slidet_tabs_tekst">Lorem Ipsum Lorem</div>
        </span>

        <span role="summer">
            <div class="slider_tabs_naslov">Leto</div>
            <div class="slidet_tabs_tekst">Lorem Ipsum Lorem</div>
        </span>

        <span role="spring">
            <div class="slider_tabs_naslov">Prolece</div>
            <div class="slidet_tabs_tekst">Lorem Ipsum Lorem</div>
        </span>

        <span role="fall">
            <div class="slider_tabs_naslov">Jesen</div>
            <div class="slidet_tabs_tekst">Lorem Ipsum Lorem</div>
        </span>

    </div>
</div>

slider_footer是容器元素，slider_tabs是子元素。slider_footer以 100% 的宽度覆盖图像（它绝对定位在图像上），并且该元素具有png图像模式。slider_tabs需要透明并显示图像。如何覆盖父元素（slider_footer）的模式并使slider_tabs透明。

Answer 1

这应该做

div#slider_footer {
    background: url(pattern.png);
}
div#slider_footer div.slider_tabs span {
    background: rgba(255,255,255,0.75);  /* R, G, B, Opacity */
}

它让#slider_footer 有你的图案背景，你的内容有一个不透明的颜色，这让你的文本完全可见。