CSSで背景を透明、文字を不透明に設定する問題を解決する_html/css_WEB-ITnose

要素の透明度を設定します:

-moz-opacity:0.8; /* Firefox で要素の透明度を設定します

filter: alpha(opacity=80) /* つまり、フィルターを使用して透明度を設定します

しかし、ラベルの背景の透明度を設定するとき、ラベル上のテキストや画像も半透明にしたくないことがよくあります。

： 例:

& lt; div & gt; 不透明 & lt;/p & lt;/div & gt; 背景:#000;width:500px ;

height:500px;color:#F30; font-weight:bold; }

これは、効果であることがわかります。見たくない。

以前は、この問題を解決するために絶対配置を使用しました。つまり、現在の p は div の子要素ではありません。

opaque

このように、div の半透明効果は要素 p に影響しません。最後に、p を目的の位置に配置します。

しかし、多くの場合、そのようなタグはあまり合理的ではなく、さらにいくつかのタグが無駄になる可能性があります。

次の方法で上記の問題を解決できます:

div{background:rgba(0,0,0,0.2) nonerepeatscroll ! important; /*FF の背景を透明にし、テキストを不透明にします*/

背景: #000; filter:Alpha(opacity=20);/*IE の背景を透明にする*/

width:500px; color:#F30;

div p{position:relative;}/*IE のテキストを不透明にする*/

Firefox では、rgba カラーを直接使用してサブラベルが半透明になる問題を解決できますが、IE はまだサポートが十分ではありません。

そこで、透明にしたくないラベルに位置属性を設定することで、問題は解決されました。

本文: http://blog.163.com/l_lihanyu/blog/static/12003272320123185372127/