semi-transparente div-Element in einer Webseite

Hey bin die Entwicklung einer website, wo ich möchten Sie ein div mit einem halb transparenten hintergrund, so dass die Seite im hintergrund sichtbar ist.
ich möchte diese Arbeit mit allen Browsern.
bin gut mit CSS , JS oder jquery...
bitte geben Sie mir Anregungen und, wenn möglich, einige Beispiel-code..

Vielen Dank im Voraus,
Raj

InformationsquelleAutor Raj | 2010-02-24

7

Wahrscheinlich Ihre beste Wette ist, mit reinem CSS. Diese Technik funktioniert auf Safari 3.2+, IE 5.5+, Firefox 3.05+, Chrome 4+, Opera 10+
```
div {
  /* black for browsers which cannot support rgba */
  background-color: #000;

  /* 70% opacity for supported browsers */
  background-color: rgba(0, 0, 0, 0.7);

  /* IE 5.5+ support #BB000000 is ~70% opacity on black */
  filter:progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#BB000000, endColorstr=#BB000000
  );

  /* IE 8 support */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#BB000000, endColorstr=#BB000000
  )";
}
```
Die Teile gehackt in für den IE gemacht, die mich wince >_< Sooo hässlich und zu kompliziert im Vergleich zu den einfachen CSS-Gegenstücke. Ich möchte die IE-Entwickler... äh ... Ihre Augen zu öffnen und erkenne den Schmerz web-Entwickler konfrontiert werden, um Kompatibilität für Ihre Anwendung.
So wahr, aber die option ist super nett, im Gegensatz zu fudging um mit PNG ' s + pngfix für den IE sowieso... 🙂
Oder wenn Sie wie ich sind, und Sie arbeiten mit Ihrem eigenen, persönlichen Projekte, die für Spaß, können Sie sich einfach zurücklehnen und sagen "Scheiß IE" ^_^

InformationsquelleAutor Owen
1

Für CSS-fähige Browser: Element.Stil.Deckkraft = dezimal von 0-1

Für IE [aka, der Teufel] : element.Stil.filter = "alpha(opacity="+(Zahl von 0-100)+")"

Beispiele auf: http://www.w3schools.com/Css/css_image_transparency.asp

Beachten Sie, dass der text/Inhalt im div wird halb-transparente als auch.

Beispiel setzt die Deckkraft ein div um 50%:
```
var myElement = document.body.getElementById("elemId");
myElement.style.opacity = 0.5;
myElement.style.filter = "alpha(opacity=50)"; //For the devil, IE
```
Übrigens, 1 [oder in dem Fall der IE, 100] ist Vollständig sichtbar, während 0 ist Total transparent.

Hoffe, das hilft! 😉

Also Sie schreiben nur die CSS-Datei mit JavaScript? Warum nicht, schreib einfach die CSS-Datei in den ersten Platz?
Er sagte, er war in Ordnung mit der Verwendung von JS. In meinem Fall, ich arbeite nicht viel mit dem "klassischen" Elemente, wie div, span, was auch immer. Ich habe das Spiel mit canvas exklusiv. Weil dieses, die ich nicht wirklich verwenden stylesheets mehr. Da ich die Arbeit mit JavaScript so viel, ich finde es chaotisch, wenn ich eine Tonne von CSS und eine Tonne von JavaScript, über alle, messing mit dem Stil eines Elements. Natürlich, wenn Sie entwerfen eine statische-ish website, indem Sie die <style> - tag ist in Ordnung.

InformationsquelleAutor Warty
1

Wenn Sie opacity die gesamte div, einschließlich text, wird an, dass die Deckkraft der Ebene.

Wenn Ihre Besucher mit einem Webkit (Chrome, Safari) oder Gecko (Firefox) browser (möglicherweise Presto (Opera) auch, aber ich bin mir nicht sicher) dann könnte man verwenden:

#divToMakePartiallyOpaque {background-color: rgba(150,150,150,0.5); }

Wobei die roten, grünen und blauen Kanäle zu 150 und der alpha eingestellt ist 0.5 (auf halbem Weg zwischen vollständig transparent und vollständig undurchsichtig).

Gibt es auch die Möglichkeit, mit einem teilweise transparenten hintergrund-Bild, wie an anderer Stelle erwähnt.

InformationsquelleAutor David Thomas
0

Können Sie auch ein semi-transparentes PNG. IE 6 unterstützt keine halb-Transparenz, soweit ich weiß, aber ich glaube, IE7+ und dem rest der mainstream-Browser.

InformationsquelleAutor Eric
0

Wenn Sie OK sind, mit einem jQuery-Lösung, die folgenden arbeiten für alle Browser, die von jQuery unterstützt (Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 9+, Chrome 1+):
```
$('div').css('opacity', 0.5);
```
InformationsquelleAutor Elmo

Elmo saids oder:

opacity= .5; 
filter:Alpha(opacity=50);  
background-color: rgba(0, 0, 0, 0.7);

InformationsquelleAutor Virgili Garcia

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.