0

テキストの後ろに白い背景があります。述べたように、CSSを使用して再配置しました。背景の不透明度を0.3にしたいのですが、HTMLでは別の分割になっているにもかかわらず、前景に影響します。私はcssの側面を持った初心者であり、もう少し専門知識を持っている人からの返答を楽しみにしています。

htmlの一部は次のとおりです。

...
<p><span>Fri</span><span>When Announced</span></p>
<p><span>Sat</span><span>Open</span></p>

</div>

<div class=...
<img src="img/cross.png" alt="Cross" width="340" height="465"/>
</div>

<div id="bkgrnd"></div>

<div id="clear"></div>

</section>

..。

cssは次のとおりです。

    #bkgrnd{
    background-color:#fff;
    border:1px solid #000;
    box-shadow:#332315 .3em .4em .2em;
    opacity: 0.3;
    width:750px;
    height:526px;
    margin-left:89px;
    margin-top:-55px;
    z-index:-2;
    }
4

3 に答える 3

0

不透明度が継承されないようにするには、不透明度の代わりにRGBa（アルファチャネル）を使用する必要があります。

参照：http ：//www.css3.info/introduction-opacity-rgba/

アルファチャネルは古いブラウザではサポートされていないことに注意してください。CSSフォールバックを行う必要があるかもしれません。

于 2013-02-14T21:43:37.753 に答える
0

使用opacityすると、子要素に影響します。rgba代わりに、次のようにバックグラウンドプロパティで使用する必要があります。

background-color: rgba(255, 255, 255, 0.3);

background-colorこれにより、不透明度が30％の白が適用されます。

于 2013-02-14T21:45:26.860 に答える
0

継承をキャンセルするために不透明度の代わりにRGBaを使用する方法についてのこの記事を参照してください。

http://acidmartin.wordpress.com/2010/11/21/using-rgba-to-prevent-the-css-opacity-inheritance-from-parent-to-child-elements/

この記事では、IE5-8のRGBa回避策を処理する方法について説明しています。

于 2013-02-14T21:47:07.667 に答える