4

私はこのような構造を持っています：

<div class="abc">
  <ul>
    <li>something</li>
    ...
  </ul>
</div>

abcdivに不透明度オプションを適用する必要があります。私がそれを行うと、それは機能しますが、 DIV =>のテキストが明るいため、内部のテキスト<ul>は不透明になります。abc<ul>

opacityDIV（その背景）に適用する方法はありますが、DIV内のコンテンツには適用できませんか？

ありがとうございました

4

7 に答える 7

6

ulをdivから引き出さずに、これを行うために考えられる唯一の方法は、単色の場合、rgbaを使用して背景色を部分的に透明にすることです。

background-color:rgba(0,0,0,.5);

これにより、背景が黒くなり、不透明度が50％になりますが、新しいブラウザでのみ機能します。

jsFiddle： http: //jsfiddle.net/jdwire/XzeGE/

古いブラウザをサポートするには、代わりに小さなpngをcssにbase64エンコードする（または単に外部画像を参照する）ことができます。詳細についてはhttp://en.wikipedia.org/wiki/Data_URI_schemeを、cssまたはhtmlにbase64でエンコードされた画像を埋め込むことの欠点についてはhttps://stackoverflow.com/a/5258101/1721527を参照してください。

背景が画像の場合は、部分的に透明なpngにします。

于 2013-03-01T14:37:09.813 に答える
2

rgba背景が色の場合、次のような背景色を使用できます。

background-color: rgba(0, 0, 0, 0.5);

これにより、子要素の不透明度に影響を与えることなく、不透明度が50％の黒い背景が生成されます。

これは古いバージョンのIE（6＆7だと思います）では機能しないことに注意してください。

于 2013-03-01T14:35:45.323 に答える
2

コンテンツとは別のdivが必要であり、次のように不透明度divの上にその位置を設定します。

<div class="container">
    <div class="opacity"></div>
    <div class="content"></div>
</div>

CSS

.container{
    position:relative;
}
.opacity{
    //desired opacity here
}
.content{
    position:absolute;
    top:0;
    left:0;
}

rgba他の回答のように、ここで背景色について話している場合は、これも良い方法です。

于 2013-03-01T14:36:51.357 に答える
1

代わりにRGBAを試してください

background-color: rgba(0,0,255,0.5);

ここで、最後の値は0から1レベルの透明度を示します

于 2013-03-01T14:37:48.440 に答える
1

これは、背景画像を作成する場合にのみ使用してください。色のアルファ値を指定します。

http://jsfiddle.net/jU8MT/

<div class="abc">
    <div class="bgd"></div>
  <ul class="def">
    <li>something</li>
  </ul>
</div>


.abc {
    width: 200px;
    height: 200px;
    position: relative;
}
.bgd {
    background: red;
    opacity: 0.1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.def {
    z-index: 1;
}

ここに画像の説明を入力してください

于 2013-03-01T14:39:42.670 に答える
0

Internet Explorerに関連することを行う前に、まずhtml5シムをヘッダーに呼び出します。

<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->

<!--The fav and touch icons -->

今あなたのCSSファイルに、

div.abc ul { background-color: #333; }

div.abc ul li{background-color: #333;}

これがあなたが探しているものだと思いますか？

于 2013-03-03T16:14:24.870 に答える
0

内部要素に不透明度を適用しようとしましたか？何かのようなもの：

div { 
    opacity: ....
}

div ul {
    opacity: .....
}
于 2013-03-01T14:39:11.907 に答える