So machen Sie die Hintergrundfarbe von div in CSS transparent

191

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.

Mistu4u
quelle
3
Weder opacitynoch filterCSS 3-Attribute. Warum denkst du, kannst du sie nicht benutzen?
Pekka
Ich weiß nicht, in meinem Eclipse Juno werden beide Attribute nicht angezeigt und gemäß W3School: Hinweis: Die Eigenschaft CSS-Deckkraft ist Teil der W3C-CSS3-Empfehlung. Siehe hier
Mistu4u
Und meine Sonnenfinsternis unterstützt (höchstwahrscheinlich) CSS3 nicht !! :(
Mistu4u
1
Ich würde sagen, Sie können diese Nachrichten ignorieren. Einige Attribute liegen außerhalb der Spezifikationen, können aber in der realen Welt verwendet werden. Eine Kombination aus opacity, filterund einige andere Attribute wie hier gezeigt: css-tricks.com/css-transparency-settings-for-all-broswers wird jeden Browser so ziemlich decken gibt es
Pekka

Antworten:

140

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/

Paul Fleming
quelle
1
"Also kann ich keine Deckkraft oder Filterattribute verwenden"
Jerska
4
@Jerska das ist eine Prämisse, die allerdings hinterfragt werden muss. Sein einziger Grund, diese Attribute nicht zu verwenden, scheint zu sein, dass sich seine IDE darüber beschwert
Pekka
Gibt es also eine andere Möglichkeit, dies zu erreichen?
Mistu4u
@Subir, wenn Sie einen anderen Weg brauchen, siehe Jerskas Antwort. Aber wie gesagt, es scheint fraglich, warum Sie überhaupt vermeiden wollen opacity.
Pekka
11
Poster wollte einen undurchsichtigen Hintergrund, kein undurchsichtiges Element. Der Text im Element ist bei Verwendung der Deckkraftmethode ebenfalls undurchsichtig. Diese Antwort ist nicht vollständig genug, um dies zu gewährleisten. Die Verwendung von rgba mit einem Fallback-PNG wäre viel besser.
René
351

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

Jerska
quelle
3
Wird auch als Kommentar bei einer anderen Antwort eingegeben. Das Schönste wäre, RGBA-Färbung und das in dieser Antwort beschriebene PNG als Fallback zu verwenden.
René
2
Bosheit über die Einfachheit der Verwendung von 'transparent' für das Hintergrundfarbenattribut. Mega Kudos!
tfont
4

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 */
RandominstanceOfLivingThing
quelle
2

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.

user3241848
quelle
1
    /*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 */
ARVIND CHAUHAN
quelle
Bitte erläutern Sie Ihre Antwort und vermeiden Sie es, nur Antworten mit Code zu veröffentlichen.
Saeed Zhiany