hintergrund transparent

[daniela]

liebe leute

ich habe eine seite gefunden und mir das css style sheet angesehen und den quelltext und dennoch werde ich nicht schlau daraus.

wie ist es gemacht, dass der hg durchscheint - das ist es doch oder? ich glaube nicht, dass das bild unterschiedlich abgespeichert wurde - also mal heller und so

weiss jemand wie das geht?

hier zu sehen unter http://www.csszengarden.com/tr/deutsch/?cssfile=/180/180.css&page=0

ich waere euch sehr dankbar wenn ihr mir helfen koenntet, denn diesen effekt wuerde ich gerne nuetzen ;o))

ich habe ein hintergrundbild und einen teil davon wuerde ich gerne mit einer hellen farbe durchscheinend bedecken ;o))

danke schon mal im voraus ;o)
daniela

[Ashura]

Hallo daniela.

wie ist es gemacht, dass der hg durchscheint - das ist es doch oder? ich glaube nicht, dass das bild unterschiedlich abgespeichert wurde - also mal heller und so

Doch, das ist der Fall.

hier zu sehen unter http://www.csszengarden.com/tr/deutsch/?cssfile=/180/180.css&page=0

Hier die CSS-Datei: http://www.csszengarden.com/180/180.css

Hier die für den Effekt verantwortliche JPEG-Grafik: http://www.csszengarden.com/180/bck2.jpg

ich waere euch sehr dankbar wenn ihr mir helfen koenntet, denn diesen effekt wuerde ich gerne nuetzen ;o))

ich habe ein hintergrundbild und einen teil davon wuerde ich gerne mit einer hellen farbe durchscheinend bedecken ;o))

Entweder du machst es ebenso wie der Autor obigen Stylesheets, oder du verpasst dem body-Element die Hauptgrafik und einem gruppierenden div-Element eine halbtransparente PNG als Hintergrund.

Dass der IE<=6.0 keine Alphatransparenz bei Grafiken ohne zusätzliche Tricks umsetzen kann, ist meiner Meinung nach verschmerzbar.

Einen schönen Sonntag noch.

Gruß, Ashura

[daniela]

vielen dank! ;o))

da hab ich mich wohl geirrt ;o))
dachte man kann ein bild nehmen und einen teil transparent drueberlegen. hmm

Entweder du machst es ebenso wie der Autor obigen Stylesheets, oder du verpasst dem body-Element die Hauptgrafik und einem gruppierenden div-Element eine halbtransparente PNG als Hintergrund.

eine blöde frage - was ist ein png?

liebe grüße
daniela

[Ashura]

Hallo daniela.

dachte man kann ein bild nehmen und einen teil transparent drueberlegen. hmm

Du kannst eine PNG darüber legen. Klickere dich hierzu ggf. ein wenig auf meiner Site herum und scrolle ganz nach unten, damit du den Effekt siehst. (Natürlich musst du einen Browser verwenden, der Alphatransparenz versteht.)

Entweder du machst es ebenso wie der Autor obigen Stylesheets, oder du verpasst dem body-Element die Hauptgrafik und einem gruppierenden div-Element eine halbtransparente PNG als Hintergrund.

eine blöde frage - was ist ein png?

Eine Portable Network Grafik. Der um Klassen bessere Nachfolger des GIF.
Siehe hierzu [Wikipedia: PNG] und PNG - die Vorurteile und die Fakten - jeenaparadies.net.

Einen schönen Sonntag noch.

Gruß, Ashura

[daniela]

hallo ashura!

vielen dank fuer deine erklärung!
hab ich mal wieder etwas dazugelernt ;o)))

dir auch einen schönen sonntagabend noch! ;o))
daniela

[MudGuard]

Hi,

Eine Portable Network Grafik. Der um Klassen bessere Nachfolger des

nicht-animierten

GIF.

cu,
Andreas

[Ashura]

Hallo MudGuard.

Eine Portable Network Grafik. Der um Klassen bessere Nachfolger des

nicht-animierten

GIF.

Ich dachte mir schon, dass diese Korrektur kommt.
Alternativen hierfür: [Wikipedia: Multiple-Image_Network_Graphics] oder besser noch [Wikipedia: Scalable_Vector_Graphics].

Einen schönen Sonntag noch.

Gruß, Ashura

[L00NIX]

Hallo Ashura.

Entweder du machst es ebenso wie der Autor obigen Stylesheets,
oder du verpasst dem body-Element die Hauptgrafik und einem
gruppierenden div-Element eine halbtransparente PNG als
Hintergrund.

Dass der IE<=6.0 keine Alphatransparenz bei Grafiken ohne
zusätzliche Tricks umsetzen kann, ist meiner Meinung nach
verschmerzbar.

Naja... noch ist der IE der Browser mit dem stärksten Marktanteil.

Aber was mich wirklich davon abhalten würde, ein PNG mit Alphakanal
für den Durchscheineffekt zu benutzen ist schlicht die Tatsache,
das das Rendering dadurch sehr langsam wird. Das wird vor allem
beim Scrolling der Seite dann deutlich.

Ein gutes Beispiel mit diesen Hintergrundeffekten liefert auch
http://www.phoenity.com/newtedge/, allerdings wird der IE
durch eine CSS-Weiche ausgesperrt. Es tut aber dennoch eingeschränkt,
sofern eben keine Scrollbalken da sind. Dann wird deutlich, dass der
IE die Eigenschaft background-attachment: fixed etwas "eigenwillig"
umsetzt. ;o)

Gruß
L00NIX

[Ashura]

Hallo L00NIX.

Naja... noch ist der IE der Browser mit dem stärksten Marktanteil.

Ja, leider. Das ist aber dennoch kein Grund, ihm ständig in den Arsch treten zu müssen.

Aber was mich wirklich davon abhalten würde, ein PNG mit Alphakanal
für den Durchscheineffekt zu benutzen ist schlicht die Tatsache,
das das Rendering dadurch sehr langsam wird. Das wird vor allem
beim Scrolling der Seite dann deutlich.

Diesen Effekt kann ich bestätigen.

Ein gutes Beispiel mit diesen Hintergrundeffekten liefert auch
http://www.phoenity.com/newtedge/, [...]

Einer meiner Favoriten bzgl. Design mit PNG: e7spy

Einen schönen Montag noch.

Gruß, Ashura

[Martin Hölter]

Hi!

wie ist es gemacht, dass der hg durchscheint - das ist es doch oder? ich glaube nicht, dass das bild unterschiedlich abgespeichert wurde - also mal heller und so

ich schon.

Gruß aus Iserlohn

Martin