web-dev-qa-db-ja.com

背景色の不透明度、しかしテキストの不透明度

テキストが不透明のまま、クロスブラウザ（Internet Explorer 6を含む）をdivの背景に対して透明にするにはどうすればよいですか？

私はjQueryなどのようなライブラリを使用せずにそれを実行する必要があります（しかし、あなたがそれを実行するライブラリを知っているなら、私は彼らのコードを見ることができるように知りたいです）。

cssopacity
378
Nir

Rgbaを使ってください。

.alpha60 {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

これに加えて、IE Webブラウザ用にbackground: transparentを宣言する必要があります。条件付きコメントなどで提供することをお勧めします。

via http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ /

585
Austin Adams

そのためにアルファ透明PNGを使います。

div.semi-transparent {
  background: url('semi-transparent.png');
}

IE6の場合は、PNG修正プログラム（ 1 、 2 ）を使用する必要があります。

32
Can Berk Güder

私は自分のブログでその効果を作成しました Landman Code 。

私がしたことは

#Header {
  position: relative;
}
#Header H1 {
  font-size: 3em;
  color: #00FF00;
  margin:0;
  padding:0;
}
#Header H2 {
  font-size: 1.5em;
  color: #FFFF00;
  margin:0;
  padding:0;
}
#Header .Background {
  background: #557700;
  filter: alpha(opacity=30);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.30;
  opacity: 0.3;
  zoom: 1;
}
#Header .Background * {
  visibility: hidden; // hide the faded text
}
#Header .Foreground {
  position: absolute; // position on top of the background div
  left: 0;
  top: 0;
}
<div id="Header">
  <div class="Background">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
  <div class="Foreground">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
</div>

重要なことは、すべてのパディング/マージンとコンテンツが、.Backgroundと.Foregroundの両方で同じでなければならないことです。

16
Davy Landman

:: beforeとdisplay：inline-blockを使用して、IE6と従来のブラウザで作業するという要件を緩和します。

div
{
  display: inline-block;
  position: relative;    
}
div::before
{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background:red;
  opacity: .2;
}

でのデモ - http://jsfiddle.net/KVyFH/172/

最近のどのブラウザでも動作します

13
brillout

https://stackoverflow.com/a/638064/417153 をありがとう@ davy-landmann。それが私が探していたものです！ LESSコードと同じ効果：

  @searchResultMinHeight = 200px;
  .searchResult {
    min-height: @searchResultMinHeight;

    position: relative;
    .innerTrans {
      background: white;
      .opacity(0.5);
      min-height: @searchResultMinHeight;
    }
    .innerBody {
      padding: 0.5em;
      position: absolute;
      top: 0;
    }
  }
0
Slawa