0

コード：

<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を透明にする方法を教えてください。

4

1 に答える 1

0

これはすべきです

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 にパターン背景があり、コンテンツに不透明度のある色があり、テキストが完全に表示されたままになります。

于 2013-02-28T17:32:09.140 に答える