CSSのみを使用して、要素の「背景」を半透明にし、要素のコンテンツ(テキストや画像)を不透明にすることは可能ですか?
テキストと背景を別々の要素にすることなく実現したいのですが。
試してみると。
<p>
<span>Hello world</span>
</p>
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
子要素は親の不透明度が適用されるので、opacity:1
は親のopacity:0.6
と相対的になるようです。
最も簡単な方法は、背景が半透明のPNG画像を使用することです。
必要であれば、JavaScriptを使ってInternet Explorer 6でも動作させることができます。
私はTransparent PNGs in Internet Explorer 6で紹介されている方法を使っています。
それ以外にも、2つの横並びの兄弟要素を使って、1つを半透明にして、もう1つを絶対的に上に配置することで、なんとかなります。
問題は、あなたの例では、テキストが実際には*完全な不透明度を持っているということです。pタグの中では完全な不透明度を持っていますが、
p`タグは半透明になっているだけです。
CSSで実現する代わりに、半透明のPNG背景画像を追加するか、テキストとdivを2つの要素に分けて、テキストをボックスの上に移動させることができます(例えば、ネガティブマージン)。
それ以外は無理でしょう。
クリスが言っていたように、透明度のあるPNGファイルを使うと、厄介なInternet Explorerで動作させるためにJavaScriptで回避策を取らなければなりません...。
[Opacity of background, but not the text][1] にいくつかのアイデアがあります。半透明の画像を使うか、追加の要素を重ねるかです。
[1]: https://stackoverflow.com/questions/637921/opacity-of-background-not-text