Comment rendre la couleur de fond div transparente en CSS

Je n'utilise pas CSS3. Je ne peux donc pas utiliser opacityni filterattributs. Sans utiliser ces attributs, comment puis-je rendre background-colortransparent un div? Cela devrait être une sorte d'exemple de zone de texte dans ce lien . Ici, la couleur d'arrière-plan de la zone de texte est transparente. Je veux faire la même chose, mais sans utiliser les attributs mentionnés ci-dessus.

L'opacité vous donne de la translucidité ou de la transparence. Voir un exemple de violon ici .

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

Remarque: ce ne sont PAS des propriétés CSS3

Voir http://css-tricks.com/snippets/css/cross-browser-opacity/

Le problème opacityest que cela affectera également le contenu, alors que souvent vous ne voulez pas que cela se produise.

Si vous voulez juste que votre élément soit transparent, c'est vraiment aussi simple que:

background-color: transparent;

Mais si vous voulez qu'il soit en couleurs, vous pouvez utiliser:

background-color: rgba(255, 0, 0, 0.4);

Ou définissez une image de fond ( 1pxpar 1px) enregistrée avec la droite alpha.
(Pour ce faire, l' utilisation Gimp, Paint.Netou tout autre logiciel d'image qui vous permet de le faire. Il
suffit de créer une nouvelle image, supprimer l'arrière - plan et de mettre une couleur semi-transparente, puis conservez - le dans .png.)

Comme l'a dit René , la meilleure chose à faire serait de mélanger les deux, avec la rgbapremière et la 1pxpar 1pximage comme solution de secours si le navigateur ne prend pas en charge alpha:

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

Voir également : http://www.w3schools.com/cssref/css_colors_legal.asp .

Démo : My JSFiddle

transparent est la valeur par défaut pour background-color

http://www.w3schools.com/cssref/pr_background-color.asp

Depuis https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

Pour définir la couleur d'arrière-plan:

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */

Il est peut-être un peu tard pour la discussion mais inévitablement quelqu'un tombera sur ce post comme je l'ai fait. J'ai trouvé la réponse que je cherchais et j'ai pensé publier ma propre opinion. Le JSfiddle suivant explique comment superposer des fichiers .PNG avec transparence. La mention par Jerska de l'attribut de transparence pour le CSS de la div était la solution: http://jsfiddle.net/jyef3fqr/

HTML:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

Et mon inspiration originale: http://jsfiddle.net/5g1zwLe3/ J'ai aussi utilisé paint.net pour créer les PNG transparents, ou plutôt les PNG avec des BG transparents.

    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */