Jak ustawić przezroczysty kolor tła div w CSS

Nie używam CSS3. Więc nie mogę użyć opacityani filteratrybutów. Bez korzystania z tych atrybutów, jak mogę uczynić background-colorprzezroczystym div? Powinien to być przykład pola tekstowego w tym linku . Tutaj kolor tła pola tekstowego jest przezroczysty. Chcę zrobić to samo, ale bez używania wyżej wymienionych atrybutów.

Krycie daje przezroczystość lub przezroczystość. Zobacz przykład Fiddle tutaj .

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

Uwaga: to NIE są właściwości CSS3

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

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

Jeśli chcesz, aby Twój element był przezroczysty, 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 ( 1pxwg 1px) zapisany z prawej strony alpha.
(Aby to zrobić, użyj Gimp, Paint.Netlub jakiegokolwiek innego programu graficznego, który pozwala, aby to zrobić.
Wystarczy utworzyć nowy obraz, należy usunąć tło i umieścić półprzezroczyste kolor w nim, a następnie zapisać go w png).

Jak powiedział przez René , najlepszym rozwiązaniem byłoby, aby wymieszać obie, przy czym rgbapierwsza i 1pxprzez 1pxobraz jako awaryjnej, jeśli przeglądarka nie obsługuje alpha:

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

Zobacz także : http://www.w3schools.com/cssref/css_colors_legal.asp .

Demo : Mój JSFiddle

przezroczysty jest domyślnym kolorem tła

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

Od 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ś trafi na ten post tak jak ja. Znalazłem odpowiedź, której szukałem i pomyślałem, że opublikuję własne zdanie na jej temat. Następujący JSfiddle zawiera informacje na temat warstw .PNG z przezroczystością. Wspomnienie Jerski o atrybucie przezroczystości dla CSS div 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 moja oryginalna inspiracja: http://jsfiddle.net/5g1zwLe3/ Użyłem również paint.net do tworzenia przezroczystych plików PNG, a raczej plików PNG z przezroczystymi BG.

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