Jak zrobić przezroczysty kolor tła div w CSS

Problem z opacity polega na tym, że wpłynie to również na zawartość, gdy często nie chcesz, aby tak się stało.

Jeśli chcesz, aby twój element był przezroczysty, jest to naprawdę tak proste, jak: {]}

background-color: transparent;

Ale jeśli chcesz, aby był w kolorach, możesz użyć:

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

Lub zdefiniuj obraz tła (1px przez 1px) zapisany z prawej alpha.
(Aby to zrobić, użyj Gimp, Paint.Net lub jakiekolwiek inne oprogramowanie graficzne, które pozwala ci to zrobić.
Wystarczy utworzyć nowy obraz, usunąć tło i umieść w nim półprzezroczysty kolor, a następnie zapisz go w png.)

Jak powiedział René , najlepszą rzeczą do zrobienia byłoby zmieszanie obu, z rgba pierwszym i 1px by 1px obrazem jako zapasowym, jeśli przeglądarka nie obsługuje Alfy:

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

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

Demo : My JSFiddle

Transparent jest domyślną wartością dla background-color

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

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

Aby ustawić kolor tła:

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

Może być trochę za późno na dyskusję, ale nieuchronnie ktoś natknie się na ten post, tak jak ja. Znalazłem odpowiedź, której szukałem i pomyślałem, że opublikuję własne zdanie na ten temat. Poniższy JSfiddle zawiera sposób warstwowania .PNG z przezroczystością. Jerska wspomniała o atrybucie przezroczystości dla CSS div ' a było rozwiązaniem: 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' });
});

I mój oryginalny Inspiracja: http://jsfiddle.net/5g1zwLe3/ Ja też używałem paint.net do tworzenia przezroczystych PNG, a raczej PNG z przezroczystymi BG.