Wie lege ich ein Transparentes Bild über ein Normales?

Es gibt die Möglichkeit mit Geduld ein Hintergrundbild zu machen also das Bild was du haben willst und dann das andere Transparentebild was du haben willst einfach darüberüpacken das würde gehen! Aber einen direkten Code habe ich jetzt keinen....

Hi, möchtest du 2 verschiedene Bilder miteinander "verschmelzen"? Das geht
mit CSS
.bild1 {background:url(deinegrafik);
position:relative; top:50% left:50%;
width:deine Grösse;
height:deine Grösse;}

die html dazu:
<div class="bild1"></div>

Das funktioniert aber nicht im IE
Besser wäre du machst dir die Grafi mit Photoshop..
Gruss Didi

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:

[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:

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

und das passende CSS dazu:

#hintergrund{
  position:absolute
  top: 0;
  left: 0;
  background: url(hinten.png);
}
#vordergrund{
  position:absolute
  top: 0;
  left: 0;
  background: url(vorne.png);
  background: expression("none");
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='vorne.png');
}

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:

#hintergrund,#vordergrund{ 
  position:absolute 
  top: 0; 
  left: 0; 
  width:100px;
  height:100px;
#hintergrund{ 
  background: url(hinten.png) no-repeat; 
} 
#vordergrund{ 
  background: url(vorne.png) no-repeat; 
  background: expression("none"); 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='vorne.png'); 
}

jetzt sollte mehr zu sehen sein.

Gruß
Marcus