Wie lege ich ein Transparentes Bild über ein Normales?

  • Hallo,

    Ich habe mir ein Bild erstellt, nun möchte ich das gerne in meiner Homepage einbauen und über das Bild ein gleich großes Transparentes .gif Bild legen, doch wie machen ich das? Mit FrontPage bekomme ich das irgendwie nicht hin.

    mfg
    Future

  • Moin!

    Warum so umständlich?

    Du kannst mit CSS den beiden Bildern genau die gleiche Position auf dem Bildschirm zuweisen, entweder einfach so oder auch z.B. innerhalb einer Tabelle:

    Code
    [img]bild1.jpg[/img]
      [img]img2.gif[/img]

    Die beiden Bilder liegen nun genau übereinander, der Z-Index sagt welches vorne ist.

    Wenn du diese Variante aber nutzen willst um deine Bilder auf der HP vor dem Kopieren zu schützen, dann spar die Mühe - es wirkt nicht. Sobald jemand deine HP aufruft hat er das Bild auch schon im Browsercache und somit auf seinem PC auf der Festplatte. Auch kann man sich ganz einfach die URL des Bildes aus dem Quelltext ziehen und das Bild dann direkt öffnen. Oder aber man benutzt einen Downloadmanger und kopiert mit einem einzigen Klick alle Bilder einer Internetseite auf die lokale Festplatte (gibt es bei Mozilla als Gratiszubehör, auch für Firefox => "Flashgot").

    G.a.d.M.

    Ronald

  • Hi,sorry das ich dir da wiedersprechen muss. "position :absolute macht die Seite unflexibel, was ist wenn ein User zB 800x600 Auflösung fährt? Dann ist sein Design im A...
    Ausserdem die Styles innerhalb der html zu definieren macht den Quellcode,je nach Umfang, sehr unübersichtlich und wenn er seine Desings mal ändern will muss er das in jeder Datei.

    Die Möglichkeit über den z-index zu gehen ist natürlich richtig. Diese Möglichkeit kann er natürlich nutzen.

    Gruss Didi

  • Dann nimmt man eben eine Tabelle und klebt die Bilder mit relativer Positionierung an eine Zellenecke an - oder irgendeinen anderen Tag (div, span).

    Ich verstehe den Sinn dieser Aktion ohnehin nicht, aber das schrieb ich ja schon.

    G.a.d.M.

    Ronald

  • Hi,

    wie man die Bilder übereinanderlegt ist doch egal, ob mit Hintergrund oder absoluter Positionierung, das Ergebnis zählt.

    Und genau da liegt die Schwierigkeit, denn der IE hat Probleme mit dem Alphakanal von PNGs, also muss man entweder GIFs nehmen oder zu einem Trick greifen, den ich (was für ein Zufall) mal beschrieben habe:
    http://<br>http://webdesign-haas.de/praxis/tipps/iefilter.shtml</a><br>
    dazu müsste man beide Bilder als Hintergrund einbinden.

    Im HTML könnte das so aussehen:

    Code
    <div id="hintergrund"></div>
    <div id="vordergrung"></div>

    und das passende CSS dazu:

    ich hoffe, das hilft weiter.
    Marcus

  • Hi,

    das mag im IE-Explorer funktioniern (keine Ahnung) auf Mozilla basierenden Browsern (Firefox, Mozilla 1.6 ff) klappt es nicht.

    "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='vorne.png');" ist kein CSS-Standard, sondern eine Eigenkonstrukion aus der Microsoft-Küche.

    G.a.d.M.

    Ronald

  • Hi,

    das ist völlig richtig, aber alle anderen Browser können PNGs richtig anzeigen und kennen auch keine expressions, deshalb werden diese Anweisungen von Opera und Firefox ignoriert.
    Falls du einen Validen Code haben möchtest bist du damit natürlich angeschmiert. Ich mache das deshalb in der Regel so, das ich diesen Teil in eine zweite Datei auslagere, die nur geladen wird, wenn der Browser ein Internetexplorer ist (diejenigen, die sich fälschlicherweise als IE ausgeben haben dann natürlich selbst Schuld, aber funktionieren tuts trotzdem).

    und ich habe auch was vergessen, die Elemente brauchen natürlich eine Größe, damit der Hintergrund überhaupt daregestellt wird:

    jetzt sollte mehr zu sehen sein.

    Gruß
    Marcus