html - background-image ずれる - CSSでテキストや画像の背景を透明にするにはどうしたらいいですか?

css background-image 固定 / html / css / opacity

CSSのみを使用して、要素の background を半透明にし、要素のコンテンツ(テキストと画像)を不透明にすることは可能ですか?

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Paul D. Waite



Answer #1
<p style="background: url(green.png);">any text</p>

もちろん、素敵なInternet Explorer 6を除いて、クールに動作します。より良い修正が利用可能ですが、ここに簡単なハックがあります:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}