3

html機能の動作に混乱しています...一方が他方の内側にopacity2つあると仮定し、外側のdivに適用すると、内側にも自動的に不透明度が適用されます。不透明度が外側でのみ機能するように、どうすればそれを元に戻すことができますか？divsopacitydivdiv

私はcssコードの不透明度を使用しました http://jsfiddle.net/4uMdj/

4

5 に答える 5

3

background-color外側の DIV で使用している場合はrgba、それに値を定義できます。次のように書きます。

.outer{
 background-color: rgba(0,0,0,0.5);
}

& IE の場合は IE フィルタを使用

ここから IE 用の rgba フィルターを生成できますhttp://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

于 2012-08-01T11:04:09.747 に答える
1 
.parent{
    position: relative;
}

.parent:before {
    z-index: -1;
    content: '';
    position: absolute;

    opacity: 0.3;
    width: xxpx;
    height: xxpx;
    background: ; 
}

.child{
    Color:xx;
}
于 2012-08-01T11:03:33.570 に答える
1

色を設定するだけで背景の不透明度を使用する方が簡単で安全な場合、これはネストされた要素には影響しません

.alpha
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}
于 2012-08-01T11:03:55.523 に答える
1

css を使用する場合は rgba を使用できますが、子要素の背景をオーバーライドする必要があります。そうしないと、親 div から継承されるためです: jsfiddle の例

例の css:

.opacity {
    background-color: rgba(0,150,0,0.2);
    padding: 20px;
    border: 1px solid #000;
}
.noopacity {
    border: 1px solid #000;
    background-color: #090; /*non alpha background*/
    padding: 20px;
}

クロスブラウザ有効にする最も簡単な方法は、必要な色と透明度で1pxのPNGファイルを作成し、次のcssを使用することです。

.opacity {
    background: url("path/to/your/1px/transparent/background/image.png");
}

画像は背景の継承として使用されないため ;)

(注: IE6 はデフォルトで PNG の透明度をサポートしていません!)

于 2012-08-01T11:40:59.713 に答える
0

opacity親要素に適用されている場合、ネストされた要素の不透明度を元に戻す (増やす) ことはできません。

代わりに使用してみてくださいbackground: rgba(r,g,b, opacity): これはネストされた要素に不透明度を適用しません

于 2012-08-01T11:03:01.750 に答える