it-swarm.com.de

Wie gebe ich Text oder Bild mit CSS einen transparenten Hintergrund?

Ist es möglich, nur mit CSS das background eines Elements halbtransparent zu machen, aber den Inhalt (Text & Bilder) des Elements undurchsichtig zu machen?

Ich möchte dies erreichen, ohne den Text und den Hintergrund als zwei separate Elemente zu haben.

Beim Versuch:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Es sieht so aus, als ob untergeordnete Elemente der Deckkraft ihrer Eltern unterworfen sind. Daher ist opacity:1 relativ zum opacity:0.6 des übergeordneten Elements.

2176
Stijn Sanders

Verwenden Sie entweder ein halbtransparentes PNG Bild oder verwenden Sie CSS3:

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

Hier ist ein Artikel aus css3.info, Deckkraft, RGBA und Kompromiss (2007-06-03).


<p style="background-color:rgba(255,0,0,0.5);">
  <span>Hello world</span>
</p>
2222
Georg Schölly

In Firefox 3 und Safari 3 können Sie RGBA wie Georg Schölly erwähnt verwenden.

Ein wenig bekannter Trick ist, dass Sie ihn auch im Internet Explorer mit dem Verlaufsfilter verwenden können.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Die erste Hexzahl definiert den Alpha-Wert der Farbe.

Komplettlösung für alle Browser:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Dies ist von CSS-Hintergrundtransparenz ohne Auswirkungen auf untergeordnete Elemente durch RGBa und Filter.

Screenshots Ergebnisnachweis:

Dies ist, wenn Sie den folgenden Code verwenden:

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33IE11IE9IE8

470

Dies ist die beste Lösung, die ich mir vorstellen konnte, ohne CSS 3. Und sie funktioniert meines Erachtens hervorragend unter Firefox,Chromeund Internet Explorer.

Platzieren Sie einen Container-DIV und zwei untergeordnete DIV in derselben Ebene, eine für den Inhalt, eine für den Hintergrund. Mithilfe von CSS können Sie den Hintergrund automatisch an den Inhalt anpassen und den Hintergrund mithilfe des Z-Index in den Hintergrund verschieben.

.container {
  position: relative;
}
.content {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  /* These three lines are for transparency in all browsers. */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
<div class="container">
  <div class="content">
    Here is the content.
    <br/>Background should grow to fit.
  </div>
  <div class="background"></div>
</div>
104
Gorkem Pacaci

Für eine einfache halbtransparente Hintergrundfarbe sind die obigen Lösungen (CSS3- oder BG-Bilder) die besten Optionen. Wenn Sie jedoch etwas ausgefalleneres tun möchten (z. B. Animation, mehrere Hintergründe usw.) oder wenn Sie sich nicht auf CSS3 verlassen möchten, können Sie die „Fenstertechnik“ ausprobieren:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

Bei dieser Technik werden zwei „Ebenen“ innerhalb des äußeren Scheibenelements verwendet:

  • eine (die "Rückseite"), die der Größe des Fensterelements entspricht, ohne den Fluss des Inhalts zu beeinträchtigen,
  • und eines (das „cont“), das den Inhalt enthält und zur Bestimmung der Fenstergröße beiträgt.

Der Bereich position: relative ist wichtig. Die hintere Ebene wird an die Größe des Fensters angepasst. (Wenn das <p> -Tag absolut sein muss, ändern Sie den Bereich von einem <p> in einen <span> und hüllen Sie alles in ein <p> -Tag mit absoluter Position.)

Der Hauptvorteil dieser Technik gegenüber den oben aufgeführten ist, dass das Fenster keine bestimmte Größe haben muss. Wie oben beschrieben, passt es in voller Breite (normales Blockelement-Layout) und nur so hoch wie der Inhalt. Das äußere Fensterelement kann beliebig dimensioniert werden, solange es rechteckig ist (d. H. Der Inline-Block funktioniert; der einfache alte Inline-Block nicht).

Außerdem haben Sie viel Freiheit für den Hintergrund. Es steht Ihnen frei, wirklich alles in das Element "back" einzufügen, ohne dass dies den Fluss des Inhalts beeinträchtigt. Wenn Sie mehrere Teilebenen in voller Größe benötigen, stellen Sie sicher, dass diese auch die Position "absolute", "width/height" (100%) haben. und oben/unten/links/rechts: auto).

Eine Variante, die eine Anpassung der Hintergrundeinfügung (über Oben/Unten/Links/Rechts) und/oder Hintergrundverankerung (durch Entfernen eines der Links/Rechts- oder Oben/Unten-Paare) ermöglicht, ist die Verwendung des folgenden CSS:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Wie geschrieben funktioniert dies in Firefox, Safari, Chrome, IE8 + und Opera, obwohl IE7 und IE6 zusätzliches CSS und zusätzliche Ausdrücke, IIRC, erfordern. Als ich das letzte Mal nachgesehen habe, funktioniert die zweite CSS-Variante in Opera nicht.

Dinge, auf die Sie achten sollten:

  • Schwimmende Elemente innerhalb der Cont-Ebene sind nicht enthalten. Sie müssen sicherstellen, dass sie gelöscht oder anderweitig enthalten sind, oder sie rutschen aus dem Boden heraus.
  • Ränder werden auf das Pane-Element und Abstände auf das Cont-Element angewendet. Verwenden Sie nicht das Gegenteil (Ränder im Inhalt oder Abstände im Bereich), da Sie sonst Kuriositäten feststellen, dass die Seite immer etwas breiter als das Browserfenster ist.
  • Wie bereits erwähnt, muss das Ganze Block oder Inline-Block sein. Fühlen Sie sich frei, <div>s anstelle von <span>s zu verwenden, um Ihr CSS zu vereinfachen.

Eine ausführlichere Demo, die die Flexibilität dieser Technik demonstriert, indem sie zusammen mit display: inline-block und sowohl mit auto als auch mit spezifischen widths/min-heights verwendet wird:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
        position: relative;
        width: 175px; min-height: 100px;
        margin: 8px;
}

.pane > .back {
        position: absolute; z-index: 1;
        width: auto; height: auto;
        top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
        position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
        <span class="back debug_green"></span>
        <span class="cont debug_red">
                Pane content.<br/>
                Pane content.
        </span>
</p>
<p class="pane debug_blue" style="float: left;">
        <span class="back debug_green"></span>
        <span class="cont debug_red">
                Pane content.<br/>
                Pane content.<br/>
                Pane content.<br/>
                Pane content.<br/>
                Pane content.<br/>
                Pane content.<br/>
                Pane content.<br/>
                Pane content.<br/>
                Pane content.
        </span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
        <span class="back debug_green"></span>
        <span class="cont debug_red">
                Pane content.<br/>
                Pane content.
        </span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
        <span class="back debug_green"></span>
        <span class="cont debug_red">
                Pane content.<br/>
                Pane content.
        </span>
</p>

Und hier ist eine Live-Demo der Technik, die ausgiebig verwendet wird:

christmas-card-2009.slippyd.com screenshot

60

Es ist besser, einen halbtransparenten .png zu verwenden.

Öffnen Sie einfach Photoshop , erstellen Sie ein 2x2 Pixelbild ( das Auswählen von 1x1 kann einen Internet Explorer-Fehler verursachen! ), füllen Sie es mit einer grünen Farbe und Stellen Sie die Deckkraft in der Registerkarte "Ebenen" auf 60% ein. Dann speichere es und mache daraus ein Hintergrundbild:

<p style="background: url(green.png);">any text</p>

Es funktioniert natürlich cool, außer in lovely Internet Explorer 6 . Es gibt bessere Lösungen, aber hier ist ein kurzer Hack:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
56
Gelens

Es gibt einen Trick, um das Markup zu minimieren: Verwenden Sie ein Pseudoelement als Hintergrund, und Sie können die Deckkraft festlegen, ohne das Hauptelement und seine untergeordneten Elemente zu beeinflussen :

DEMO

Ausgabe:

Background opacity with a pseudo element

Relevanter Code:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

Browser-Unterstützung ist Internet Explorer 8 und höher.

53
web-tiki

Die einfachste Methode wäre, ein halbtransparentes Hintergrundbild als PNG-Bild zu verwenden.

Sie können JavaScript verwenden, um die Funktion in Internet Explorer 6 zu aktivieren.

Ich verwende die in Transparente PNGs in Internet Explorer 6 beschriebene Methode.

Anders als das,

sie könnten es mit two side-by-side sibling elements fälschen - machen Sie ein halbtransparentes , dann absolutely position the other over the top?

23
Chris

Diese Methode ermöglicht es Ihnen, ein Bild im Hintergrund und nicht nur eine Volltonfarbe zu haben, und kann verwendet werden, um Transparenz für andere Attribute wie Ränder zu haben. Es sind keine transparenten PNG-Bilder erforderlich.

Verwenden Sie :before (oder :after) in CSS und geben Sie ihnen den Opazitätswert, um das Element in seiner ursprünglichen Opazität zu belassen. So können Sie: before verwenden, um ein Faux-Element zu erstellen und ihm den gewünschten transparenten Hintergrund (oder die gewünschten Ränder) zu geben, und es hinter den Inhalt verschieben, den Sie mit z-index undurchsichtig halten möchten.

Ein Beispiel ( fiddle ) (beachte, dass das DIV mit der Klasse dad nur einen gewissen Kontext und Kontrast zu den Farben bieten soll, dieses zusätzliche Element wird eigentlich nicht benötigt, und das Das rote Rechteck wird etwas nach unten und rechts verschoben, um den Hintergrund hinter dem Element fancyBg sichtbar zu machen.

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

mit diesem CSS:

.dad {
    background: Lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

In diesem Fall verfügt .fancyBg:before über die gewünschten CSS-Eigenschaften mit Transparenz (roter Hintergrund in diesem Beispiel, kann jedoch ein Bild oder ein Rahmen sein). Es ist als absolut positioniert, um es hinter .fancyBg zu verschieben (verwenden Sie Werte von Null oder was auch immer für Ihre Bedürfnisse besser geeignet ist).

21
frozenkoi

Das Problem ist, dass der Text in Ihrem Beispiel tatsächlich volle Deckkraft hat. Das p -Tag ist vollständig undurchlässig, das p -Tag ist jedoch nur halbtransparent.

Sie können ein semitransparentes PNG-Hintergrundbild hinzufügen, anstatt es in CSS zu realisieren, oder Text trennen und in zwei Elemente unterteilen und den Text über das Feld bewegen (z. B. negativer Rand).

Sonst wird es nicht möglich sein.

BEARBEITEN:

Genau wie Chris erwähnt hat: Wenn Sie eine PNG-Datei mit Transparenz verwenden, müssen Sie eine JavaScript-Problemumgehung verwenden, damit sie im lästigen Internet Explorer funktioniert ...

17
SvenFinke

Fast alle diese Antworten gehen davon aus, dass der Designer einen einfarbigen Hintergrund haben möchte. Wenn der Designer tatsächlich ein Foto als Hintergrund haben möchte, ist JavaScript wie das jQuery Transify-Plugin die derzeit einzig richtige Lösung an anderer Stelle erwähnt .

Wir müssen uns an der Diskussion der CSS-Arbeitsgruppe beteiligen und sie dazu bringen, uns ein Hintergrundopazitätsattribut zu geben! Dies sollte mit der Funktion für mehrere Hintergründe Hand in Hand gehen.

15
thinsoldier

So mache ich das (es ist vielleicht nicht optimal, aber es funktioniert):

Erstellen Sie das div, das halbtransparent sein soll. Gib ihm eine Klasse/ID. Lassen Sie es leer und schließen Sie es. Geben Sie eine festgelegte Höhe und Breite ein (z. B. 300 x 300 Pixel). Geben Sie eine Deckkraft von 0,5 oder was auch immer Sie möchten und eine Hintergrundfarbe.

Dann, DIREKT UNTER diesem Div, erstelle ein weiteres Div mit einer anderen Klasse/ID. Erstellen Sie einen Absatz darin, in dem Sie Ihren Text platzieren. Geben Sie die div -Position an: relativ und oben: -295px (das sind NEGATIVE 295 Pixel). Geben Sie einen Z-Index von 2 für ein gutes Maß an und stellen Sie sicher, dass die Deckkraft 1 ist. Gestalten Sie Ihren Absatz nach Ihren Wünschen, aber stellen Sie sicher, dass die Abmessungen kleiner sind als die des ersten div, damit er nicht überläuft .

Das ist es. Hier ist der Code:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

Dies funktioniert in Safari 2.x, ich kenne mich mit Internet Explorer nicht aus.

13
paris ionescu

Hier ist ein jQuery-Plugin, das alles für Sie erledigt: Transify (Transify - Ein jQuery-Plugin, mit dem Sie auf einfache Weise Transparenz/Deckkraft auf den Hintergrund eines Elements anwenden können).

Hin und wieder hatte ich dieses Problem, und deshalb habe ich beschlossen, etwas zu schreiben, das mir das Leben erheblich erleichtert. Das Skript hat eine Größe von weniger als 2 KB und benötigt nur eine Codezeile, damit es funktioniert. Wenn Sie möchten, können Sie auch die Deckkraft des Hintergrunds animieren.

12
joren

Vor einiger Zeit schrieb ich darüber in Cross Browser Background Transparency With CSS .

Mit Internet Explorer 6 können Sie den Hintergrund transparent machen und den Text vollständig undurchsichtig im Vordergrund lassen. Für die anderen Browser empfehle ich dann eine transparente PNG-Datei.

10
philnash

ndurchsichtigkeit des Hintergrunds, aber nicht des Textes hat einige Ideen. Verwenden Sie entweder ein halbtransparentes Bild oder überlagern Sie ein zusätzliches Element.

10
fearoffours

Wenn Sie ein Photoshop Typ sind, können Sie auch Folgendes verwenden:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Oder:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
9
suraj rawat

Damit der Hintergrund eines Elements halbtransparent wird, muss der Inhalt (Text & Bilder) des Elements jedoch undurchsichtig sein. Sie müssen CSS-Code für dieses Bild schreiben und ein Attribut namens Opazität mit minimalem Wert hinzufügen. z.B.

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

// Wenn der Wert geringer ist, ist mehr Transparenz, oder wenn der Wert geringer ist, ist Transparenz.

8
Pushp Singh

Hintergrundfarbe: rgba (255,0,0,0.5); wie oben erwähnt ist die beste Antwort, einfach ausgedrückt. Die Verwendung von CSS3 selbst im Jahr 2013 ist nicht einfach, da sich der Grad der Unterstützung durch verschiedene Browser mit jeder Iteration ändert.

Obwohl background-color von allen gängigen Browsern unterstützt wird (nicht neu in CSS3) [1], kann die Alphatransparenz schwierig sein, insbesondere bei Internet Explorer vor Version 9 und bei Safari mit Rahmenfarben vor Version 5.1. [2]

Die Verwendung von Compass oder SASS kann die Produktion und die plattformübergreifende Kompatibilität erheblich verbessern.


[1] W3Schools: CSS-Eigenschaft für Hintergrundfarbe

[2] Norman's Blog: Checkliste zur Browserunterstützung CSS3 (Oktober 2012)

7
Will Nielsen

CSS3 hat eine einfache Lösung für Ihr Problem. Verwenden:

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

Hier steht rgba für Rot, Grün, Blau und Alpha. Der Grünwert ergibt sich aus 255 und die Hälfte der Transparenz ergibt sich aus dem Wert von 0,5 Alpha.

7
Touhid Rahman

Wenn Sie Less verwenden, können Sie fade(color, 30%) verwenden.

6
alex

Sie können pure CSS : rgba(red, green, blue, alpha) verwenden, wobei alpha die gewünschte Transparenzstufe ist. JavaScript oder jQuery werden nicht benötigt.

Hier ist ein Beispiel:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
4
user3968801

Sie können dies für Internet Explorer 8 durch (ab) unter Verwendung der Verlaufssyntax lösen. Das Farbformat ist ARGB. Wenn Sie den Präprozessor Sass verwenden, können Sie Farben mit der integrierten Funktion "ie-hex-str ()" konvertieren.

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
4
Henrik
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?

3
premgowda

Sie können RGBA(red, green, blue, alpha) in CSS verwenden.

Also machen Sie einfach so etwas, das in Ihrem Fall funktioniert:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}
1
Alireza

Es gibt eine einfachere Lösung, ein Bild auf demselben Div zu überlagern. Es ist nicht die richtige Verwendung dieses Tools. Aber es funktioniert wie ein Zauber, dieses Overlay mit CSS zu erstellen.

Verwenden Sie einen eingefügten Schatten wie diesen:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

Das ist alles :)

1
edd2110

Sie können mit rgba color code CSS wie in diesem Beispiel verwenden.

.imgbox img{
  height:100px;
  width:200px;
  position:relative;
}
.overlay{
  background:rgba(74, 19, 61, 0.4);
  color:#fff;
  text-shadow:0px 2px 5px #000079;
  height:100px;
  width:300px;
  position:absolute;
  top:10%;
  left:25%;
  padding:25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>
1
Rudra

Aus meiner Sicht ist es am besten, die Hintergrundfarbe mit Deckkraft zu verwenden, wenn wir dies verwenden, dann verlieren wir die Deckkraft für die anderen Elemente wie Testfarbe und Rand usw. nicht.

background-color: rgba(71,158,0,0.8);

Hintergrundfarbe mit Deckkraft verwenden

hintergrundfarbe: rgba (R, G, B, Opazität);

enter image description here

0
Vinod Kumar

Normalerweise benutze ich diese Klasse für meine Arbeit. Es ist sehr gut.

.transparent {
  filter: alpha(opacity=50); /* internet Explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}
0