So machen Sie die Hintergrundfarbe von div in CSS transparent

Ich benutze kein CSS3. So kann ich nicht verwenden opacityoder filterAttribute. Wie kann ich ohne diese Attribute die background-colorTransparenz von a machen div? Es sollte eine Art Textfeldbeispiel in diesem Link sein . Hier ist die Hintergrundfarbe des Textfelds transparent. Ich möchte dasselbe machen, aber ohne die oben genannten Attribute zu verwenden.

Opazität gibt Ihnen Transluzenz oder Transparenz. Sehen Sie hier ein Beispiel für Fiddle .

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

Hinweis: Dies sind KEINE CSS3-Eigenschaften

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

Das Problem dabei opacityist, dass es sich auch auf den Inhalt auswirkt, wenn Sie dies häufig nicht möchten.

Wenn Sie nur möchten, dass Ihr Element transparent ist, ist dies wirklich so einfach wie:

background-color: transparent;

Aber wenn Sie möchten, dass es in Farben ist, können Sie Folgendes verwenden:

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

Oder definieren Sie ein Hintergrundbild ( 1pxvon 1px), das mit der rechten Seite gespeichert ist alpha.
(Verwenden Sie dazuGimp , Paint.Netoder jede andere Bildbearbeitungssoftware , die Sie das tun kann.
Nur ein neues Bild erstellen, löschen Sie den Hintergrund und lege eine halbtransparente Farbe drin, dann speichert sie in png.)

Wie von René gesagt , ist es am besten, beide zu mischen, wobei das rgbaerste und das 1pxby- 1pxBild als Fallback dienen, wenn der Browser Alpha nicht unterstützt:

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

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

Demo : Meine JSFiddle

transparent ist die Standardeinstellung für Hintergrundfarbe

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

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

So stellen Sie die Hintergrundfarbe ein:

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

Es mag etwas spät für die Diskussion sein, aber unweigerlich wird jemand auf diesen Beitrag stoßen, wie ich es getan habe. Ich fand die Antwort, nach der ich suchte, und dachte, ich würde meine eigene Meinung dazu veröffentlichen. Die folgende JSfiddle enthält Informationen zum Überlagern von PNGs mit Transparenz. Jerskas Erwähnung des Transparenzattributs für das CSS des Div war die Lösung: 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' });
});

Und meine ursprüngliche Inspiration: http://jsfiddle.net/5g1zwLe3/ Ich habe auch paint.net zum Erstellen der transparenten PNGs oder vielmehr der PNGs mit transparenten BGs verwendet.

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