3

私はタグdivがあるものを持っています。a次に、不透明度内のテキストも0.5にopacity:0.5しdivました。背景画像を使用したくない場合はopacity:1、div内にopacity:0.5 ??でテキストを含めるにはどうすればよいですか?

4

6 に答える 6

12

Set the background color of the parent using rgba (includes alpha transparency). Example:

.Container {
    background-color:rgb(0,0,0); /* fallback for IE 8 and below */
    background-color:rgba(0,0,0,0.5);
}
.Text {
    color:rgb(255,255,255);
}

This sets the opacity of the background of the container when using colors, however it does not set the opacity of the children. If you need to do that, set the opacity of the children to whatever you'd like with another class: 

.OtherChildItem {
    opacity:0.5;
    filter:alpha(opacity=50); /* IE 8 and below */
}

If you want to use a background-image, just set the opacity on the image itself (use a PNG).

于 2013-01-29T15:33:26.893 に答える
3

できません。HTML レンダリング モデルでは、実際の子の不透明度を親の不透明度より大きくすることはできません。

ドキュメントから（強調鉱山）：

不透明度は、後処理操作と考えることができます。概念的には、要素(その子孫を含む)が RGBA オフスクリーン イメージにレンダリングされた後、不透明度設定はオフスクリーン レンダリングを現在の複合レンダリングにブレンドする方法を指定します。

子 div は親 div の外に配置する必要があります。これは通常、静的なポジショニングとは異なる種類のポジショニングを使用して実現されます。

于 2013-01-29T15:32:22.413 に答える
2

<div>テキストにはまったく異なるものを使用してください。

<div id="parentDiv">
    <div id="mainDiv">
    </div>
    <div id="childDiv">
       Hello
    </div>
</div>

CSS

#parentDiv
{
    position:relative;

}
#childDiv
{
    position:absolute;
    top:45px;
    left:45px;
    opacity:1;
}
#mainDiv
{
    width:100px;
    height:100px;
    opacity:0.5;
}

チェックしてください：http：//jsfiddle.net/AliBassam/aH9HC/結果に気付くように、背景色を追加しました。

私はあなたに使用を強制absoluteしているので、テキストの配置に問題がないようにしたいので、いくつかの数学的な計算を行って最適な位置を取得します。

top = ( Height of Div Opacity(0.5) - Height of Div Opacity(1) ) / 2
left = ( Width of Div Opacity(0.5) - Width of Div Opacity(1) ) / 2
于 2013-01-29T15:34:25.487 に答える
0

上記の回答のように、テキスト用に別のdivが必要であり、不透明なdivの上に収まるように絶対に配置されます。z-indexも高い値に設定することをお勧めします。

于 2013-01-29T15:49:06.133 に答える
0

The a tag takes opacity from parent div. You can use the rgba CSS property on div rgba(0, 0, 0, 0.5) and again on a tag rgba(255, 0, 0, 1.0).

于 2013-01-29T15:35:33.850 に答える