web-dev-qa-db-fra.com

Comment rendre la couleur de fond div transparente en CSS

Je n'utilise pas CSS3. Je ne peux donc pas utiliser les attributs opacity ou filter. Sans utiliser ces attributs, comment puis-je rendre le background-color transparent d'un div? Cela devrait être un peu comme dans l'exemple de zone de texte lien . Ici, la couleur de fond de la zone de texte est transparente. Je veux faire la même chose, mais sans utiliser les attributs mentionnés ci-dessus.

csshtmlbackground-colortransparent
178
Mistu4u

L'opacité vous donne la transparence ou la transparence. Voir un exemple Fiddle here .

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

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

130
Paul Fleming

Le problème avec opacity est 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 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 d'arrière-plan (1px sur 1px) enregistrée avec le droit alpha.
(Pour ce faire, utilisez Gimp, Paint.Net ou tout autre logiciel d’image permettant de le faire.
Créez simplement une nouvelle image, supprimez l’arrière-plan et mettez-y une couleur semi-transparente, puis enregistrez-le au format png.)

Comme dit par René , la meilleure chose à faire serait de mélanger les deux, avec la rgba en premier et l'image 1px par 1px comme solution de secours si navigateur ne supporte pas alpha:

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

Voir aussi : http://www.w3schools.com/cssref/css_colors_legal.asp .

Démo : Mon JSFiddle

336
Jerska

transparent est la valeur par défaut pour la couleur d'arrière-plan

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

10
user1147171

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

Pour définir la couleur de fond:

/* 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 */
4
randominstanceOfLivingThing

La discussion risque d’être un peu tardive, mais inévitablement, quelqu'un tombera sur ce message comme je l’ai fait. J'ai trouvé la réponse que je cherchais et je pensais publier ma propre version. Le JSfiddle suivant explique comment superposer des fichiers .PNG avec une 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 initiale: http://jsfiddle.net/5g1zwLe3/ J'ai également utilisé Paint.net pour créer les PNG transparents, ou plutôt les PNG avec des BG transparents.

2
user3241848