nicht angemeldet
Opacity - Rahmen für DIV Tag
Hallo,
ich versuche für den IE6, IE7 und FireFox 2 eine Seite zu bauen,
in der sich ein DIV befindet der den Content aufnehmen soll.
Um diesen Tag möchte ich einen Rahmen, bzw. Schlagschatten mit Transparenz legen.
Dies funktioniert im IE auch einwandfrei mit diesen Styles
.dropshadow1, .dropshadow2 {
opacity:0;
filter:alpha(opacity=0);
-moz-opacity:0;
float:left;
clear:left;
background: url(../../../../all/images/) no-repeat bottom right !important;
background: url(../../../../all/images/shadow.png) no-repeat bottom right;
margin: 5px 0 5px 5px !important;
margin: 5px 0 5px 5px;
width: 500px;
padding: 0px;
}
.innerbox {
opacity:100;
filter:alpha(opacity=100);
-moz-opacity:1.0;
position:relative;
bottom:5px;
right: 5px;
border: 0px solid #999999;
padding:0px;
margin: 0px 0px 0px 0px;
}
und hier der Aufruf im Quelltext
<div class="dropshadow2" style="filter:alpha(opacity=25); -moz-opacity:0.01;">
<div class="innerbox" style="width:625px; height:350px; background-color:#FFFFFF; border-left:2px solid #FF9900; border-top:2px solid #FF9900;filter:alpha(opacity=100); -moz-opacity:1.0;"></div></div>
Leider übernimmt der DIV Innerbox die Transparenz des darüberliegenden DIV dropshadow2.
Der Versuch, dem unteren DIV keine Transparenz zuzuweisen funktionierte leider auch nicht.
Kann mir jemand dabei helfen dies auch in FireFox abilden zu können, oder geht das gar nicht?
Vielen Dank und Grüße
Tolwin
-
Hallo,
-moz-opacity:0;
Geckobrowser kennen die CSS-3-Eigenschaft opacity seit Version 1.7 (= Firefox 1.0), daher kann man -moz-opacity weglassen.
Dein Problem ist aber ein anderes. opacity wirkt sich auf das gesamte Element und seine Kindelemente aus.
CSS 3 definiert Farbangaben mit Transparenz z.B. rgba(); [=rgba(rot,grün,blau,tranparenz);]. Dadurch wird nur die Farbe transparent angezeigt, nicht der Inhalt oder Kindelemente.
Allerdings wird diese Eigenschaft momentan nur von Safari und dem in Entwicklung befindenen Firefox 3 erkannt.
Gruß;
-
Hallo Daniel,
danke für deine Antwort .... dachte schon, da kommt nix mehr =)
CSS 3 definiert Farbangaben mit Transparenz z.B. rgba(); [=rgba(rot,grün,blau,tranparenz);]. Dadurch wird nur die Farbe transparent angezeigt, nicht der Inhalt oder Kindelemente.
Allerdings wird diese Eigenschaft momentan nur von Safari und dem in Entwicklung befindenen Firefox 3 erkannt.
Gibt es hierfür ggf. einen Workaround den Du mir nennen könntest?
Gruß
Tolwin-
Hallo,
danke für deine Antwort .... dachte schon, da kommt nix mehr =)
In der Regel werden hier auch noch Beiträge gelesen und beantwortet, die sich ganz unten auf der Seite befinden. Nur Geduld :)
Gibt es hierfür ggf. einen Workaround den Du mir nennen könntest?
Nunja, die CSS-Eigeschaften für Rahmenbilder sind noch kaum implementiert, sieht also schelcht aus.
Als normalen Hintergrund kann man ein halbtransparentes PNG verwenden.
Das hat lediglich den Nachteil, dass es im Internet Explorer keine Transparenz anzeigen kann (du muss für das PNG-Bild eine Hintergrundfarbe bestimmen, dann ist die Ersatzfarbe nicht das hässliche Grau).
Freundliche Grüße;
-
Nunja, die CSS-Eigeschaften für Rahmenbilder sind noch kaum implementiert, sieht also schelcht aus.
Das ist bedauerlich! ... aber vielen Dank für die Antwort.
Gruß
-
-
-