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

Question

Comment faire de la transparence cross-browser (y compris Internet Explorer 6) pour l'arrière-plan d'un DIV alors que le texte reste opaque?

Je dois le faire sans utiliser de bibliothèque comme jQuery, etc. (Mais si vous connaissez une bibliothèque qui le fait, je serais ravie de savoir que je peux regarder leur code).

Answer 1

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 les navigateurs Web IE, 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/

Answer 2

J'utilise un PNG alpha-transparent pour cela:

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

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

Answer 3

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

Ce que j'ai fait était:

 <div id="Header">
  <div class="Background">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
  <div class"Foreground">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
</div
 

que d'utiliser le css suivant:

 #Header
{
   position: relative;
}
#Header H1
{
   font-size: 3em;
   color: #00FF00;
}
#Header H2
{
   font-size: 1.5em;
   color: #FFFF00;
}
#Header .Background
{
   background: #557700;
   filter: alpha(opacity=30);
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
   opacity:0.3;
   -moz-opacity: 0.30; 
   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;
}
 

La chose importante que chaque remplissage / marge et le contenu doivent être les mêmes dans le .Background comme .Foreground.

Answer 4

Détendez votre exigence de travailler sur IE6 et les navigateurs hérités, 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 à http://jsfiddle.net/KVyFH/172/

Cela fonctionnera sur n'importe quel navigateur moderne

Answer 5

Merci @ davy-landmann pour http://stackoverflow.com/a/638064/417153 . C'est ce que je cherchais! Même effet avec le code 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;
    }
  }