Halbtransparente Bilder

Ryuuzaki93 · 26.01.2011, 11:00

Hi,

ich hab ein halbtransparentes Hintergrundbild, aber es wird immer nichttransparent angezeigt. Hab leider grad nur FF zum testen da. Hier mal der Code

PHP-Code:

  echo "

<div id=\"header\">

  <img src=\"images/weiss_transparent.gif\" id=\"logo\">

  <div id=\"weristonline\">

    <div class=\"margin30\">

      ".$phrase['online']['online']."&nbsp;".$online['online']."<br>

      ".$phrase['online']['reg']."&nbsp;".$online['reg']."<br>   

      ".$phrase['online']['reg_heute']."&nbsp;".$online['reg_heute']."

    </div>

  </div>

  <br clear=\"all\">

</div>

";

es geht konktret um die Div Box weristonline, hier noch der css code

PHP-Code:

  #weristonline {

  background: white url(images/weiss_transparent.gif);

  -moz-border-radius: 15px;

  -khtml-border-radius: 15px;

  margin-right: 20px;

  margin-top: 40px;

  height: 150px;

  width: 250px;

  float: right;

}

warum wird die Grafik nicht halbtransparent angezeigt? Habs schon mit gif und png versucht, ging beides nicht.

fab · 26.01.2011, 12:16

Wie hast du es denn geschafft, ein halbtransparentes GIF zu erzeugen?

eagle275 · 26.01.2011, 15:24

jau ..

GIF , JPEG -> Nix Transparenz
PNG -> Transparent möglich über Alpha-Kanal (32 bit pro Pixel)

beim PNG kommt es aufs Programm an, mit dem du es erzeugst. Windows Paint kann es nicht, Paintshop Pro, Photoshop und Konsorten aber schon. Bei Fireworx musst du unter umständen das "Hauseigene" PNG erst umwandeln in Web-PNG .....

nikosch · 26.01.2011, 15:29

Zitat:

GIF , JPEG -> Nix Transparenz

Doch, gif kann Transparenz. Aber keine Semi-Transparenz.

eagle275 · 26.01.2011, 15:36

Tschuldigung, da war ich wohl zu schnell mit GIF ... hab auch noch mal nachgeschaut....

tr0y · 27.01.2011, 07:09

Du weißt aber schon das

Code:

background: white url(images/weiss_transparent.gif);

dein Div erst weiß anmalt und dann das bild als hintergrund kachelt oder ?
Wenn dein Bild schon eine Pseudotransparenz hat, wäre es auch ratsam nur das bild als hintergrund zu nehmen und dem container zu sagen er soll sich mal zu glas machen.

Code:

background: transparent url(images/weiss_transparent.gif);

transparent kann hier auch weggelassen werden, es ist der default für background.

BlackScorp · 27.01.2011, 11:05

PHP-Code:

  #weristonline {

 
  -moz-border-radius: 15px;

  -khtml-border-radius: 15px;

  margin-right: 20px;

  margin-top: 40px;

  height: 150px;

  width: 250px;

  float: right;

   filter:alpha(opacity=50); //IE

   -moz-opacity:0.5; //FF

   -khtml-opacity: 0.5; //KA

  opacity: 0.5; //Opera glaub ich

 
}

eagle275 · 27.01.2011, 11:44

Zusatz .. //IE -> IE > IE 6 .. der 6er und alle älteren KANN keine Transparenz bzw macht dann "ziemlich" merkwürdige Sachen

Bei mir führte eine PNG-Grafik mit Transparenz dazu, dass IE 6 den kompletten div, auf dem das Bild angezeigt wird, durchsichtig anzeigt - etwas doof, wenn der Styleguide divs mit weißem Hintergrund will - aber der allgemeine Hintergrund ein Mittelgrau ist. Plötzlich hat man mitten auf der weißen "Seite" einen Grauen Flecken, in dem das Bild natürlich auch noch doof aussieht (die verwendeten Farben in dem Firmenlogo, dass ich so anzeigen MUSS!, wirken wirklich nur auf weiß gut)

BlackScorp · 27.01.2011, 12:04

ja für den IE 6 muss man so ein Opacity Fix gedöns runterladen

http://www.twinhelix.com/css/iepngfix/demo/

eagle275 · 27.01.2011, 12:26

ah.. sehr interessant - in meinem Fall hab ich im xten Versuch endlich eine Gif-Version vom Logo ohne transparenten Hintergrund gefunden, dass ich nicht noch mit Faktor 1/23,258 skalieren musste ...

aber immerhin nett zu wissen - wobei ich eher für die End(?Er?)lösung bin - man nehme einfach einen moderneren Browser^^

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Geänderte Bilder neu resizen	smilla	PHP Tipps 2010	3	06.03.2010 19:13
[Erledigt] Wie kann man Bilder sinnvoll verkleinern?	Squall	PHP Tipps 2009	7	17.06.2009 15:55
Bilder uploaden und anzeugen	raphaelf	PHP Tipps 2009	23	26.04.2009 21:34
Bilder ohne DB sicher speichern	Diet	PHP Tipps 2005	6	25.03.2009 00:07
Entscheidung für Bilder	maclaim1988	PHP Tipps 2009	2	07.02.2009 18:50
[Erledigt] Bilder weren ncht aktualisiert	pfump	PHP Tipps 2008	26	25.08.2008 19:09
Zip Archiv entpacken und Bilder verkleinern	Simon9990	PHP Tipps 2008	5	08.10.2007 00:32
bilder zu groß?!	lindner	PHP Tipps 2006	9	19.10.2006 08:32
Bilder "schützen"		PHP Tipps 2006	4	06.03.2006 15:25
Bilder löschen		PHP Tipps 2005-2	4	24.10.2005 11:37
Bilder aus einem unterverzeichis anzeigen.Hilfe		PHP Tipps 2005-2	3	12.09.2005 15:36
Mehrere Bilder Hochladen und bearbeiten		PHP Tipps 2005-2	7	23.07.2005 13:48
Bilder in Tabellen	nixdorf	HTML, Usability und Barrierefreiheit	36	09.05.2005 21:15
Bilder aus der Datenbank	Skazi	Datenbanken	2	09.02.2005 13:42

26.01.2011, 11:00
Ryuuzaki93 Erfahrener Benutzer Registriert seit: 11.12.2009 Beiträge: 117 PHP-Kenntnisse: Fortgeschritten	Halbtransparente Bilder Hi, ich hab ein halbtransparentes Hintergrundbild, aber es wird immer nichttransparent angezeigt. Hab leider grad nur FF zum testen da. Hier mal der Code PHP-Code: `echo " <div id=\"header\"> <img src=\"images/weiss_transparent.gif\" id=\"logo\"> <div id=\"weristonline\"> <div class=\"margin30\"> ".$phrase['online']['online']." ".$online['online']."<br> ".$phrase['online']['reg']." ".$online['reg']."<br> ".$phrase['online']['reg_heute']." ".$online['reg_heute']." </div> </div> <br clear=\"all\"> </div> ";` es geht konktret um die Div Box weristonline, hier noch der css code PHP-Code: `#weristonline { background: white url(images/weiss_transparent.gif); -moz-border-radius: 15px; -khtml-border-radius: 15px; margin-right: 20px; margin-top: 40px; height: 150px; width: 250px; float: right; }` warum wird die Grafik nicht halbtransparent angezeigt? Habs schon mit gif und png versucht, ging beides nicht.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.01.2011, 12:16
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Wie hast du es denn geschafft, ein halbtransparentes GIF zu erzeugen? __________________ PHP Blog + Library CSS Effects + Tools

26.01.2011, 15:24
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	jau .. GIF , JPEG -> Nix Transparenz PNG -> Transparent möglich über Alpha-Kanal (32 bit pro Pixel) beim PNG kommt es aufs Programm an, mit dem du es erzeugst. Windows Paint kann es nicht, Paintshop Pro, Photoshop und Konsorten aber schon. Bei Fireworx musst du unter umständen das "Hauseigene" PNG erst umwandeln in Web-PNG ..... __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

26.01.2011, 15:36
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	Tschuldigung, da war ich wohl zu schnell mit GIF ... hab auch noch mal nachgeschaut.... __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

27.01.2011, 07:09
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Du weißt aber schon das Code: background: white url(images/weiss_transparent.gif); dein Div erst weiß anmalt und dann das bild als hintergrund kachelt oder ? Wenn dein Bild schon eine Pseudotransparenz hat, wäre es auch ratsam nur das bild als hintergrund zu nehmen und dem container zu sagen er soll sich mal zu glas machen. Code: background: transparent url(images/weiss_transparent.gif); transparent kann hier auch weggelassen werden, es ist der default für background. __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

27.01.2011, 11:05
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	PHP-Code: `#weristonline { -moz-border-radius: 15px; -khtml-border-radius: 15px; margin-right: 20px; margin-top: 40px; height: 150px; width: 250px; float: right; filter:alpha(opacity=50); //IE -moz-opacity:0.5; //FF -khtml-opacity: 0.5; //KA opacity: 0.5; //Opera glaub ich }` __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

27.01.2011, 11:44
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	Zusatz .. //IE -> IE > IE 6 .. der 6er und alle älteren KANN keine Transparenz bzw macht dann "ziemlich" merkwürdige Sachen Bei mir führte eine PNG-Grafik mit Transparenz dazu, dass IE 6 den kompletten div, auf dem das Bild angezeigt wird, durchsichtig anzeigt - etwas doof, wenn der Styleguide divs mit weißem Hintergrund will - aber der allgemeine Hintergrund ein Mittelgrau ist. Plötzlich hat man mitten auf der weißen "Seite" einen Grauen Flecken, in dem das Bild natürlich auch noch doof aussieht (die verwendeten Farben in dem Firmenlogo, dass ich so anzeigen MUSS!, wirken wirklich nur auf weiß gut) __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

27.01.2011, 12:04
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	ja für den IE 6 muss man so ein Opacity Fix gedöns runterladen http://www.twinhelix.com/css/iepngfix/demo/ __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

27.01.2011, 12:26
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	ah.. sehr interessant - in meinem Fall hab ich im xten Versuch endlich eine Gif-Version vom Logo ohne transparenten Hintergrund gefunden, dass ich nicht noch mit Faktor 1/23,258 skalieren musste ... aber immerhin nett zu wissen - wobei ich eher für die End(?Er?)lösung bin - man nehme einfach einen moderneren Browser^^ __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste