2012-04-13 23 views
1

CSSスタイルの背景色と0.7の不透明度のDIVがあります。完璧に動作します。しかし、そのDIVタグの中にはIMGタグがあります。私の問題は、IMGがDIVと同じ不透明度を得ることです。私はそれを望ましくありません。私はIMGを不透明にして、「不透明度:1!重要」を設定しようとしました。 IMGの場合、DIVのようにまだ半透明です。不透明度のDIVに配置されたimgの不透明度を避ける方法は?

誰でも助けてください。

+1

こんにちはあなたがこれを見ることができますhttp://stackoverflow.com/questions/10005047/can-a-child-div-have-a-higher-opacity- than-css/10005347#10005347 –

+0

azad :)ありがとうございます。 – rassom

答えて

6

これは、常にすべての子要素に影響するため、不透明度を使用して行うことはできません。代わりにrgba-colorをdivの背景として使用することもできます(all modern browsersでサポートされています)。不透明度は除外してください。

background: rgba(0, 0, 255, 0.7); // 70% opaque blue 
+0

また、IE6-9用のrgbaグラディエントフィルタもありますが、いくつかの微妙な調整が必要な場合もあります。もっと詳しい情報はこちら:http://css-tricks.com/rgba-browser-support/ – Ege

2

私は、あなたはそれが起こってから保つことはできないと思う。あなたはおそらく、divの外にあるimgと一緒に行く必要がありますし、いくつかの面倒な位置でそこに入れている:絶対; CSS。それはきれいではないが、何が働いても。私はoeziのソリューションを好むが、それはあなたがやりたいことと互換性がないかもしれない。もしそれがそうであれば、あなたはoeziの解決策に行くべきです。

<div> 
    <img src="" alt=""> 
    <div style="position: absolute;"> 
    Content 
    </div> 
</div> 
+0

私はoeziの解決策に行きました。お返事ありがとうございました。それを感謝:) – rassom

4

こんにちは、私はここであなたが増加し、親コンテナの背景の不透明度を減少させ、その子コンテナには影響しませんことができてプロパティを言及しています。シンプルですが、基本的には不透明度のアルファベットの&アルファベットのrgbカラーを使用する必要があります。

background:rgba(146,146,146,0.1); 

かの例を参照してください - http://jsfiddle.net/8LFLd/20/

+0

私は上記のoeziのソリューションと一緒に、あなたのソリューションと基本的に同じ行った。お返事ありがとうございました。感謝します :) – rassom