web-dev-qa-db-fra.com

Opacité de la couleur de fond, mais pas du texte

Comment rendre la transparence inter-navigateurs (y compris Internet Explorer 6) transparente pour l'arrière-plan d'un div pendant que le texte reste opaque?

Je dois le faire sans utiliser aucune bibliothèque telle que jQuery, etc. (Mais si vous connaissez une bibliothèque qui le fait, j'adorerais le savoir pour que je puisse consulter leur code).

cssopacity
380
Nir

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

En plus de cela, vous devez déclarer background: transparent pour IE navigateurs Web, de préférence servis via des commentaires conditionnels ou similaires!

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

593
Austin Adams

J'utilise un fichier PNG alpha-transparent pour cela:

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

Pour IE6, vous devez utiliser un correctif PNG ( 1 , 2 ), cependant.

32
Can Berk Güder

J'ai créé cet effet sur mon blog Code Landman .

Ce que j'ai fait était

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

La chose importante que chaque remplissage/marge et contenu doit être identique dans les deux. Fond et. Fond.

16
Davy Landman

Pour que vous puissiez vous détendre sur IE6 et les navigateurs existants, vous pouvez utiliser :: before et afficher: inline-block

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

Démo sur http://jsfiddle.net/KVyFH/172/

Cela fonctionnera sur n'importe quel navigateur moderne

13
brillout

Merci @ davy-landmann pour https://stackoverflow.com/a/638064/41715 . C'est ce que je cherchais! Même effet avec le code MOINS:

  @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