Deckkraft der Hintergrundfarbe, aber nicht des Textes

Question

Wie kann ich die browserübergreifende (einschließlich Internet Explorer 6) Transparenz für den Hintergrund einer div während der Text undurchsichtig bleibt?

Ich brauche, um es zu tun, ohne mit einer Bibliothek wie jQuery, etc. (Aber wenn Sie wissen, von einer Bibliothek, die es tut, ich würde gerne wissen, so dass ich auf ihren Code aussehen kann).

Answer 1

Verwenden Sie 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)";
}

Darüber hinaus müssen Sie Folgendes angeben background: transparent für IE-Webbrowser, vorzugsweise über bedingte Kommentare oder ähnliches!

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

Answer 2

Ich verwende dafür ein alphatransparentes PNG:

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

Für IE6 müssen Sie einen PNG-Fix verwenden ( 1 , 2 ), obwohl.

Answer 3

Ich habe diesen Effekt in meinem Blog erzeugt Landman Code .

Was ich tat, war

#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>

Wichtig ist, dass die Abstände/Ränder und der Inhalt sowohl im Hintergrund als auch im Vordergrund gleich sind.

Answer 4

Um Ihre Anforderungen an IE6 und ältere Browser zu erfüllen, können Sie ::before und display: inline-block verwenden.

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

Demo unter http://jsfiddle.net/KVyFH/172/

Es funktioniert mit jedem modernen Browser

Answer 5

Danke @davy-landmann für https://stackoverflow.com/a/638064/417153 . Das ist es, wonach ich gesucht habe! Gleicher Effekt mit LESS-Code:

  @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;
    }
  }