✔ Transparenter DIV-Container?

Status
Nicht offen für weitere Antworten.
O

outdoorshop24

Mitglied
Hallo Forum,

ich arbeite gerade an einem neuen Design für meine Homepage.

Die Seite soll ein Hintergrundbild haben und der Text in einem DIV-Container stehen, welcher halbtransparent mit gräulicher Farbe stehen.

Ich kriege das mit der transparenz aber leider nur mit dem img-Tag hin.

Hier mein bisheriger Code:
HTML: 
<html>
 <head>
  <title>Testseite</title>
  <link rel="stylesheet" type="text/css" href="styles/main.css">
    <!-- in der css-Datei wird die Schriftart festgelegt -->
 </head>
  <body background="pictures/site_background.jpg">
   <div style="background-image:url(pictures/background.png);filter:alpha(opacity=80);">
    Hier sollte der Text auf grauem transparenten Hintergrund stehen
   </div>
<!-- mit folgendem img-Tag funktioniert's bereits, nur bekomme ich keinen Text darüber -->
  <img border="0" src="pictures/background.png" style="filter:alpha(opacity=80);">
 </body>
</html>

Für eure Hilfe schonmal vielen Dank im Voraus
 
Nutze einfach eine halbtransparende Hintergrundgrafik. Eine andere Möglichkeit gibt es nicht, dem Hintergrund einen höheren Transparenzwert als dem Inhalt zu geben.
 
Hallo Gumbo,

wie erstelle ich am besten eine halbtransparente Grafik. Ich habe kein besonderes Grafik-Programm und mit Paint sind die Möglichkeiten doch eher sehr eingeschränkt.

Ich weiß, dass diese Frage vermutlich blöde rüberkommt, bin aber was Grafiken angeht eine absolute NULL :eek:
 
Hi,

du könntest das kostenlose Grafikprogramm GIMP verwenden, um eine halbtransparente PNG-Grafik zu erstellen.
 
Okay, ich habe GIMP heruntergeladen und eine Grafik erstellt.
Wenn ich jetzt die Seite lade, ist der Hintergrund aber nicht transparent, sondern durchgehend weiß.

Was mache ich falsch?
Hier ein Link zu der Test-Seite: http://test.av-allgaeu.de
 
Zuletzt bearbeitet:
Hast du denn auch die Transparenz (=Deckkraft) für die Füllfarbe eingestellt?
 
Ja, ich habe die Deckkraft auf 50 eingestellt. In der Vorschau von Gimp wird alles richtig angezeigt. Doch auf der Homepage ist immer noch keine transparenz vorhanden.
 
Die Transparenz ist sehr wohl vorhanden, nur benötigt der IE6 etwas "Unterstützung", da er transparente PNGs nicht darstellen kann.

Code: 
<style type="text/css">
div.box {
background-image: url(back.png); /* Für moderne Browser */
width: 300px; /* Breitenangabe */
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
div.box {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='back.png');
}
</style>
<![endif]-->
Code: 
<body>
    <div class="box">Box mit transparentem Hintergrund</div>
</body>
 
Benutzt du den Internet Explorer? Der kann nämlich erst seit der Version 7 PNGs mit Transparenz darstellen.
 
@Gumbo: Ich nutze den Internet Explorer Version 6.x
Wenn der IE keine PNG-Dateien mit Transparenz anzeigen kann, geht das evtl. mit einem anderen Dateiformat (ich denke da an gif oder jpeg?)

@Maik: Ich habe beide Versionen des Style-Blocks ausprobiert. Bei der ersten ändert sich nichts, bei der zweiten erscheint gar kein Bild.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück