PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

NiPicS · 03.12.2007, 14:47

#Begrüßung#
Hallo.

#Darstellung#
Ich habe bei einer Zelle einer Tabelle eine Hintergrundfarbe festgelegt. Jetzt füge ich in die Zelle ein Bild ein und was passiert?

#Problem#
Hintergrund verschwindet und nur das Bild erscheint.

#Einschränkung#
Allerdings ist es nur bei IE der Fall. Bei FireFox funktioniert alles Sinngemäß.

#Frage#
Gibt es eine Möglichkeit dieses anzupassen?

Tobbsn · 03.12.2007, 16:42

is das bild n gif?

NiPicS · 04.12.2007, 18:14

das bild ist PNG

hier ist die URL

das khaki-Bild sollte eigentlich auf dem dunkel beigen Hintergrund sein. Tut es aber nicht.

mit Firefox allerdings ist alles wie es sein soll

Herr_D · 04.12.2007, 22:20

such dir was aus

Der Ie hat halt Probs mit transparent .png

05.12.2007, 22:35

Falls du mit "IE" den IE6 meinst schau mal hier, hab ich neulich was zu geschrieben: Elbcoast Weblog » Blog Archive » PNGs mit Alphakanal im IE6 nutzen

NiPicS · 10.12.2007, 01:11

ja, hab den 6.

werde mir mal durchlesen. danke

NiPicS · 10.12.2007, 01:13

ja, den 6ten meine ich

Danke für den Link. Werde mir mal durchlesen

NiPicS · 11.12.2007, 13:56

toll! jetzt habe ich nen dreifachpost

ehrlich gesagt kriege ich das nicht hin. ich habe jetzt hintergrundfarbe einer Tabelle und ein bild mit transparenz.

Code:

<table align="center" bgcolor="#be8739" width="200" border="0" cellpadding="0">
    <tr><td><img src="img/menu_head.png" /></td></tr>

wie kann ich hinkriegen, dass menu_head.png transparent wird?!

kannst du helfen Poddn?

Partholon · 11.12.2007, 15:44

Geh in dein Grafikprogramm deiner Wahl, setz den Hintergrund statt transparent auf die Hintergrundfarbe deine Tabelle. Speicher es als jpg, wahlweise auch png und feddich ist die Laube. Hier ist es überhaupt nicht nötig, eine Hintergrundgrafik transparent zu machen

11.12.2007, 21:20

Steht doch alles in dem Artikel drin. Du musst der Grafik eine id verpassen und für diese id per css den AlphaImageLoader-Filter drüberbügeln:

HTML-Code:

<html>
<head>
<style type="text/css">

#menuhead {
  background-image: url('img/menu_head.png');
  width: 200px;
  height: 100px;
}

</style>

<!--[if lt IE 7]>
<style type="text/css">
#menuhead {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/menu_head.png',sizingMethod='crop');
</style>
<![endif]-->

</head>
<body>
<table align="center" bgcolor="#be8739" width="200" border="0" cellpadding="0">
  <tr>
    <td><div id="menuhead"></div></td>
  </tr>
</table>

Was da genau passiert:

Ich zeige ein DIV an und definiere per css für das DIV, dass es 200x100 Pixel groß ist und ein Hintergrundbild haben soll.

Damit kommt der IE6 allerdings noch nicht klar. Deshalb bau ich einen "conditional comment" ein:

Alles was zwischen  steht, wird nur vom Internet Explorer < 7 (also IE6, IE5.5, IE5...) interpretiert.

In diesem Block leg ich noch ein CSS an, dass zuerst das Hintergrundbild löscht und dann den besagten AlphaImageLoader anwendet.

Easy peasy

NiPicS · 11.12.2007, 23:29

da wird ein BILD!! als Hintergrund gesetzt mit Transparenz. Ich jedoch will FARBE als Hintergrund haben und ein BILD mit Transparenz draufpacken.

background-image: url('img/menu_head.png');
background-image: none;

haut also nicht mehr hin

11.12.2007, 23:35

Die Farbe haust du in den TD rein. Das background-image: none; bezieht sich lediglich auf den div und dient dazu, das (im IE6 ohne Transparenz darstellende) png-Hintergrundbild zu entfernen.

Ausprobieren, glücklich sein.

Herr_D · 11.12.2007, 23:39

nimm gif und du hast das Theater nicht...

Partholon · 12.12.2007, 08:07

Zitat:

Zitat von Partholon

Geh in dein Grafikprogramm deiner Wahl, setz den Hintergrund statt transparent auf die Hintergrundfarbe deine Tabelle. Speicher es als jpg, wahlweise auch png und feddich ist die Laube. Hier ist es überhaupt nicht nötig, eine Hintergrundgrafik transparent zu machen

Wie ich schon geschrieben habe, ist in seinem Beispiel (einfarbiger Hintergrund) weder ein transparentes gif (die zumeist eher bescheiden aussehen) noch ein transparentes png notwendig. Den ganzen Quatsch mit dem Alphakanal kann man sich sparen. Aber warum einfach, wenns auch kompliziert geht...

12.12.2007, 09:14

Manchmal gehts halt ums Prinzip.

03.12.2007, 14:47	#1
NiPicS Newbie Registriert seit: 12.07.2007 Beiträge: 65	Bild auf einem Hintergrund (IE) #Begrüßung# Hallo. #Darstellung# Ich habe bei einer Zelle einer Tabelle eine Hintergrundfarbe festgelegt. Jetzt füge ich in die Zelle ein Bild ein und was passiert? #Problem# Hintergrund verschwindet und nur das Bild erscheint. #Einschränkung# Allerdings ist es nur bei IE der Fall. Bei FireFox funktioniert alles Sinngemäß. #Frage# Gibt es eine Möglichkeit dieses anzupassen?

03.12.2007, 16:42	#2
Tobbsn Helper Registriert seit: 17.10.2007 Ort: Augsburg Beiträge: 216	AW: Bild auf einem Hintergrund (IE) is das bild n gif? __________________ des wird scho ois wern...

04.12.2007, 18:14	#3
NiPicS Newbie Registriert seit: 12.07.2007 Beiträge: 65	AW: Bild auf einem Hintergrund (IE) das bild ist PNG hier ist die URL das khaki-Bild sollte eigentlich auf dem dunkel beigen Hintergrund sein. Tut es aber nicht. mit Firefox allerdings ist alles wie es sein soll

04.12.2007, 22:20	#4
Herr_D Ansprechpartner Forum & Webbereich Registriert seit: 09.06.2005 Ort: Waren (Müritz) Beiträge: 8.654 Verwendet: CS4	AW: Bild auf einem Hintergrund (IE) such dir was aus Der Ie hat halt Probs mit transparent .png __________________ Ein Hamster macht noch keinen Gulasch. Durch CSS können alle Block-Elemente mittels margin:auto; horizontal zentriert werden. In Block-Elementen enthaltene Elemente und Inline-Elemente können über text-align: center; horizontal zentriert werden.

05.12.2007, 22:35	#5
Poddn Gast Beiträge: n/a	AW: Bild auf einem Hintergrund (IE) Falls du mit "IE" den IE6 meinst schau mal hier, hab ich neulich was zu geschrieben: Elbcoast Weblog » Blog Archive » PNGs mit Alphakanal im IE6 nutzen

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Jetzt kostenlos Mitglied werden und Gratis-DVD erhalten

Reklame

Anzeige

Aktuelles Commag

Anzeige

DarkSide

Anzeige

10.12.2007, 01:11	#6
NiPicS Newbie Registriert seit: 12.07.2007 Beiträge: 65	AW: Bild auf einem Hintergrund (IE) ja, hab den 6. werde mir mal durchlesen. danke

10.12.2007, 01:13	#7
NiPicS Newbie Registriert seit: 12.07.2007 Beiträge: 65	AW: Bild auf einem Hintergrund (IE) ja, den 6ten meine ich Danke für den Link. Werde mir mal durchlesen

11.12.2007, 13:56	#8
NiPicS Newbie Registriert seit: 12.07.2007 Beiträge: 65	AW: Bild auf einem Hintergrund (IE) toll! jetzt habe ich nen dreifachpost ehrlich gesagt kriege ich das nicht hin. ich habe jetzt hintergrundfarbe einer Tabelle und ein bild mit transparenz. Code: <table align="center" bgcolor="#be8739" width="200" border="0" cellpadding="0"> <tr><td><img src="img/menu_head.png" /></td></tr> wie kann ich hinkriegen, dass menu_head.png transparent wird?! kannst du helfen Poddn?

11.12.2007, 15:44	#9
Partholon DAU Registriert seit: 08.03.2006 Ort: Potsdam Beiträge: 232 Kamera: Canon EOS 450D	AW: Bild auf einem Hintergrund (IE) Geh in dein Grafikprogramm deiner Wahl, setz den Hintergrund statt transparent auf die Hintergrundfarbe deine Tabelle. Speicher es als jpg, wahlweise auch png und feddich ist die Laube. Hier ist es überhaupt nicht nötig, eine Hintergrundgrafik transparent zu machen

11.12.2007, 21:20	#10
Poddn Gast Beiträge: n/a	AW: Bild auf einem Hintergrund (IE) Steht doch alles in dem Artikel drin. Du musst der Grafik eine id verpassen und für diese id per css den AlphaImageLoader-Filter drüberbügeln: HTML-Code: <html> <head> <style type="text/css"> #menuhead { background-image: url('img/menu_head.png'); width: 200px; height: 100px; } </style> <!--[if lt IE 7]> <style type="text/css"> #menuhead { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/menu_head.png',sizingMethod='crop'); </style> <![endif]--> </head> <body> <table align="center" bgcolor="#be8739" width="200" border="0" cellpadding="0"> <tr> <td><div id="menuhead"></div></td> </tr> </table> Was da genau passiert: Ich zeige ein DIV an und definiere per css für das DIV, dass es 200x100 Pixel groß ist und ein Hintergrundbild haben soll. Damit kommt der IE6 allerdings noch nicht klar. Deshalb bau ich einen "conditional comment" ein: Alles was zwischen <!--[if lt IE 7]> und <![endif]--> steht, wird nur vom Internet Explorer < 7 (also IE6, IE5.5, IE5...) interpretiert. In diesem Block leg ich noch ein CSS an, dass zuerst das Hintergrundbild löscht und dann den besagten AlphaImageLoader anwendet. Easy peasy

11.12.2007, 23:29	#11
NiPicS Newbie Registriert seit: 12.07.2007 Beiträge: 65	AW: Bild auf einem Hintergrund (IE) da wird ein BILD!! als Hintergrund gesetzt mit Transparenz. Ich jedoch will FARBE als Hintergrund haben und ein BILD mit Transparenz draufpacken. background-image: url('img/menu_head.png'); background-image: none; haut also nicht mehr hin

11.12.2007, 23:35	#12
Poddn Gast Beiträge: n/a	AW: Bild auf einem Hintergrund (IE) Die Farbe haust du in den TD rein. Das background-image: none; bezieht sich lediglich auf den div und dient dazu, das (im IE6 ohne Transparenz darstellende) png-Hintergrundbild zu entfernen. Ausprobieren, glücklich sein.

11.12.2007, 23:39	#13
Herr_D Ansprechpartner Forum & Webbereich Registriert seit: 09.06.2005 Ort: Waren (Müritz) Beiträge: 8.654 Verwendet: CS4	AW: Bild auf einem Hintergrund (IE) nimm gif und du hast das Theater nicht... __________________ Ein Hamster macht noch keinen Gulasch. Durch CSS können alle Block-Elemente mittels margin:auto; horizontal zentriert werden. In Block-Elementen enthaltene Elemente und Inline-Elemente können über text-align: center; horizontal zentriert werden.

12.12.2007, 09:14	#15
Poddn Gast Beiträge: n/a	AW: Bild auf einem Hintergrund (IE) Manchmal gehts halt ums Prinzip.

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Jetzt kostenlos Mitglied werden und Gratis-DVD erhalten

Reklame

Anzeige

Aktuelles Commag

Anzeige

DarkSide

Social Media

Anzeige