Ergebnis 1 bis 9 von 9

Thema: Wie lege ich ein Transparentes Bild über ein Normales?

  1. #1
    Future
    Gast

    Standard 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Azubi(ne)
    Registriert seit
    05.02.2005
    Beiträge
    84
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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....

  3. #3
    Azubi(ne)
    Registriert seit
    18.07.2004
    Ort
    Oer-Erkkenschwick
    Beiträge
    63
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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">[img]deineGrafiktransparent[/img]</div>

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

  4. #4
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  5. #5
    Azubi(ne)
    Registriert seit
    18.07.2004
    Ort
    Oer-Erkkenschwick
    Beiträge
    63
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  6. #6
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  7. #7
    Fortgeschrittene/r
    Registriert seit
    21.11.2004
    Ort
    Bremen
    Beiträge
    175
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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 /> <a href="http://webde...html</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:
    Code:
    #hintergrund&#123;
      position&#58;absolute
      top&#58; 0;
      left&#58; 0;
      background&#58; url&#40;hinten.png&#41;;
    &#125;
    #vordergrund&#123;
      position&#58;absolute
      top&#58; 0;
      left&#58; 0;
      background&#58; url&#40;vorne.png&#41;;
      background&#58; expression&#40;"none"&#41;;
      filter&#58;progid&#58;DXImageTransform.Microsoft.AlphaImageLoader&#40;enabled=true, sizingMethod=scale src='vorne.png'&#41;;
    &#125;
    ich hoffe, das hilft weiter.
    Marcus

  8. #8
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

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

    "filterrogidXImageTransform.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

  9. #9
    Fortgeschrittene/r
    Registriert seit
    21.11.2004
    Ort
    Bremen
    Beiträge
    175
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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:
    Code:
    #hintergrund,#vordergrund&#123; 
      position&#58;absolute 
      top&#58; 0; 
      left&#58; 0; 
      width&#58;100px;
      height&#58;100px;
    #hintergrund&#123; 
      background&#58; url&#40;hinten.png&#41; no-repeat; 
    &#125; 
    #vordergrund&#123; 
      background&#58; url&#40;vorne.png&#41; no-repeat; 
      background&#58; expression&#40;"none"&#41;; 
      filter&#58;progid&#58;DXImageTransform.Microsoft.AlphaImageLoader&#40;enabled=true, sizingMethod=scale src='vorne.png'&#41;; 
    &#125;
    jetzt sollte mehr zu sehen sein.

    Gruß
    Marcus

Ähnliche Themen

  1. Bild über bild legen
    Von gene im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 27.09.2007, 19:44
  2. Bild ÜBER Tabelle
    Von Crav3X im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 13.11.2006, 08:53
  3. Bild oder Text anzeigen wenn mit Maus über Bild
    Von kwg|the-hell im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.06.2005, 13:31
  4. Transparentes Bild
    Von Noch Gast ... im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 9
    Letzter Beitrag: 08.12.2004, 16:48
  5. Transparentes bild, abobe photoshop 7.0
    Von |o|o im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 7
    Letzter Beitrag: 03.06.2004, 00:05

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •