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

background: transparent url / html / css

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
.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  / *これらの3行は、すべてのブラウザで透明性を確保するためのものです。 * /
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>