wake-up-neo.com

So machen Sie div Hintergrundfarbe in CSS transparent

Ich benutze kein CSS3. Daher kann ich die Attribute opacity oder filter nicht verwenden. Wie kann ich ohne Verwendung dieser Attribute den background-color für ein div transparent machen? Es sollte eine Art Beispiel für ein Textfeld in diesem Link sein. Hier ist die Hintergrundfarbe des Textfelds transparent. Ich möchte das gleiche machen, aber ohne die oben genannten Attribute zu verwenden.

178
Mistu4u

Deckkraft gibt Ihnen Transparenz oder Transparenz. Sehen Sie sich ein Beispiel an Fiddle hier .

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

130
Paul Fleming

Das Problem mit opacity ist, dass es sich auch auf den Inhalt auswirkt, wenn dies häufig nicht gewünscht wird.

Wenn Sie nur möchten, dass Ihr Element transparent ist, ist dies ganz einfach:

background-color: transparent;

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

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

Oder definieren Sie ein Hintergrundbild (1px von 1px), das mit dem Recht alpha gespeichert wurde.
(Verwenden Sie dazu Gimp, Paint.Net oder eine andere Bildsoftware, mit der Sie dies tun können.
Erstelle einfach ein neues Bild, lösche den Hintergrund und füge eine halbtransparente Farbe hinzu, dann speichere es in png.)

Wie von René gesagt, wäre das Beste, beides zu mischen, mit dem rgba first und dem 1px by 1px image als Fallback, wenn das Browser unterstützt kein Alpha:

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 : My JSFiddle

336
Jerska

transparent ist die Standardeinstellung für Hintergrundfarbe

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

10
user1147171

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

So legen Sie die Hintergrundfarbe fest:

/* 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 ein wenig spät für die Diskussion sein, aber zwangsläufig wird jemand auf diesen Beitrag stoßen, wie ich es getan habe. Ich fand die Antwort, die ich suchte, und dachte, ich würde meine eigene Meinung dazu abgeben. Die folgende JSfiddle-Anleitung beschreibt, wie Sie PNGs mit Transparenz überlagern. 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 Paint.net auch zum Erstellen der transparenten PNGs bzw. der PNGs mit transparenten BGs verwendet.

2
user3241848