nicht angemeldet
Text auf transparentem HG ist auch transparent..
0 0 0 0 0 0 0 0 
Auge
0
Text auf transparentem HG ist auch transparent..
Hallo,
Ich habe dem body ein Hintergrundbild zugeordnet. Darauf liegt ein div-Element, das eine halbtransparente Hintergrundfarbe haben soll. In diesem Kasten soll dann Text stehen. Nun passiert es aber mit folgendem Code, dass der Text auch transparent ist, obwohl er nochmal in einem seperaten div liegt. Soweit ich gelesen habe, sind die Transparenzeigenschaften nicht vererblich. Hier der Code:
<html>
<title>CSS</title>
<style type="text/css">
body{
background-color : black;
}
#kasten1{
opacity : 0.5;
filter : alpha(opacity=50);
-moz-opacity : 0.5;
background-color : red;
}
#kasten2{
color : white;
opacity : 1.0;
filter : alpha(opacity=100);
-moz-opacity : 1.0;
}
</style>
</head>
<body>
<div id="kasten1">
<div id="kasten2">
Cascading Style Sheets
</div>
</div>
</body>
</html>
Die Worte "Cascading Style Sheets" sind also ebenfalls so transparent wie der Hintergrund des darunter liegenden divs. Aber auch wenn man dem Text-div explizit nochmal null Transparenz zuweist wie im Code oben bringt das nichts.
Ist das Sinn der Sache und/oder kann man das ändern? Die Schrift sollte voll deckend sein für meine Zwecke.
Vielen Dank und viele Grüße,
Peete
-
Hi,
Ich habe dem body ein Hintergrundbild zugeordnet. Darauf liegt ein div-Element, das eine halbtransparente Hintergrundfarbe haben soll.
und warum machst Du dann das gesamte Element transparent?
Soweit ich gelesen habe, sind die Transparenzeigenschaften nicht vererblich.
Richtig.[1] Andernfalls wäre das nächste Kindelement bereits 75% transparent.
Die Worte "Cascading Style Sheets" sind also ebenfalls so transparent wie der Hintergrund des darunter liegenden divs.
Sie sind ebenso teiltransparent wie das Element, zu dem sie gehören. Du hast *nicht* den Hintergrund transparent gemacht, sondern das Element - mit allem, was dazu gehört, also allen Kinden, dem Rahmen, enthaltenem Text, und selbstverständlich auch dem Hintergrund.
Aber auch wenn man dem Text-div explizit nochmal null Transparenz zuweist wie im Code oben bringt das nichts.
Eine Deckkraft > 1 ist nicht möglich, nein.
Ist das Sinn der Sache
Ja.
und/oder kann man das ändern?
Ja. Wenn Du nur den Hintergrund teiltransparent machen möchtest, nutze die für den Hintergrund zuständigen Eigenschaften.
Die Schrift sollte voll deckend sein für meine Zwecke.
Also doppelt deckend, nachdem Du das Element halbtransparent gemacht hast. Das geht nicht.
Cheatah
[1] Vererb_lich_ ist selbstverständlich alles. Vererbt wird die opacity-Eigenschaft per default aber nicht. Dass im übrigen die opacity- und die -moz-opacity-Eigenschaften erst ab CSS/3.0 gültig sind, die filter-Eigenschaft nach aktuellem Stand der Dinge jedoch nie, ist Dir hoffentlich bewusst.
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
so, das habe ich jetzt ziemlich gut verstanden, auch das mit der Vererbung, alles klar, danke Dir!Mit folgendem Code kann ich das Ganze bei einem statischen Kasten zwar zum "laufen" bekommen:
<html>
<title>CSS</title>
<style type="text/css">
body{
background-color : black;
color : white;
}
#kasten1{
opacity : 0.5;
filter : alpha(opacity=50);
-moz-opacity : 0.5;
background-color : red;}
#kasten2{opacity : 1.0;
filter : alpha(opacity=100);
-moz-opacity : 1.0;
}
#kasten3{
position : absolute;
left : 200px;
top : 5px;
}
</style>
</head>
<body>
<div id="kasten1">
<div id="kasten2">
Cascading Style Sheets
</div>
</div>
<div id="kasten3">
Cascading Style Sheets
</div>
</body>
</html>Jetzt ist aber das Problem, dass in dem Kasten eine explorerartige JavaScript-Navigation liegt, sich die Höhe des Kastens also ständig ändern kann und sich der darunterliegende halbtransparente Kasten natürlich mitverändern soll, also sollte die Navi IM Kasten liegen, was mir jetzt nicht möglich scheint.
Kann man einem inneren Element die "normale" Deckkraft des bodys wieder zurückgeben?
Muss ich per JavaScript die Höhe des Kastens immer mitverändern, d.h. der Höhe der Navi (eine Liste) anpassen?Viele Grüße,
PeetePS: Über den Status der Eigenschaften bin ich mir bewußt, jawohl. ;-)
-
Hi,
so, das habe ich jetzt ziemlich gut verstanden,
noch nicht ganz so gut, wie ich es bevorzuge. In der Lösung, die keine Manipulationen des HTML-Codes benötigt - die also als Lösung bezeichnet werden kann - werden Begriffe wie "opacity" und "filter" nicht auftauchen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Na, gibts dann eine saubere Lösung?
-
Hi,
Na, gibts dann eine saubere Lösung?
ja, wenn auch nicht _nur_ per CSS.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
na und wie würdest Du es machen?
Ich habs jetzt mit einem PNG24 gemacht, der IE kriegt aber andere Bilder ohne Transparenzen, Pech für ihn.vG,
Peete-
Hi Peete,
Ich habs jetzt mit einem PNG24 gemacht, der IE kriegt aber andere Bilder ohne Transparenzen
Auch der IE (ab 5.5) kann ohne allzu großen Aufwand halbtransparente PNGs darstellen. Dein Suchbegriff ist: alphaimageloader
Grüße,
Jochen
-
Vielen Dank euch Dreien!
Das mit dem AlphaImageLoader hatte ich auch schon und es sah erst gut vom Bild her, aber die dynamische JS-Navigation funktioniert dann nicht mehr, sie scheint im IE "im Bild zu liegen" und ist nicht mehr anklickbar, obwohl sie im Vordergrund liegt.
Den verlinkten Artikel werd ich jetzt mal lesen, ansonsten hab ich ein wenig die Elemente umgeordnet, so dass ich die Transparenz vermutlich auch aus Teilbilder zusammenstückeln kann, dann funktionierts überall und ist schön standardkonform. :-) Ist ja auch nicht zu verachten.
Viele Grüße,
Peete-
Hallo Peete,
aber die dynamische JS-Navigation funktioniert dann nicht mehr, sie scheint im IE "im Bild zu liegen" und ist nicht mehr anklickbar
Wie groß ist das verwendete PNG? Es wird doch eh skaliert, die Größe sollte demnach egal sein. Mit einem PNG welches nur 1px hoch (und wenige breit) ist müssten die Links weiterhin anklickbar sein.
Viele Grüße,
Jochen
-
-
-
Hallo
Ich habs jetzt mit einem PNG24 gemacht, der IE kriegt aber andere Bilder ohne Transparenzen, Pech für ihn.
Da du sowieso schon mit den "CSS"-Filtern für den MSIE rumgespielt hast, kannst du dem auch den Filter zur Darstellung von PNG24 mit Alpha-Transparenz unterjubeln.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pfad/zum/bild.png', sizingMethod='image');
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1 -
Hallo Peete.
Ich habs jetzt mit einem PNG24 gemacht, der IE kriegt aber andere Bilder ohne Transparenzen, Pech für ihn.
Wenn sich hinter der alphatransparenten PNG eine einfache Hintergrundfarbe befindet, kannst du diese Farbe als Hintergrundfarbe für die PNG selbst mitspeichern; GIMP kann das beispielsweise. Der IE zeigt dann diese an Stelle des üblichen Graus an.
Siehe auch „PNG - die Vorurteile und die Fakten“
Einen schönen Montag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
-
-
-
-
-
-