tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
12
ZUGRIFFE
7994
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 07.01.07 14:20 #1
    outdoorshop24 outdoorshop24 ist offline Mitglied Bronze
    Registriert seit
    May 2006
    Beiträge
    31
    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-Code:
    <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
     
  2. 07.01.07 14:23 #2
    Avatar von Gumbo
    Gumbo Gumbo ist offline
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.502
    Blog-Einträge
    10
    Nutze einfach eine halbtransparende Hintergrundgrafik. Eine andere Möglichkeit gibt es nicht, dem Hintergrund einen höheren Transparenzwert als dem Inhalt zu geben.
     
    Markus Wulftange
  3. 07.01.07 14:36 #3
    outdoorshop24 outdoorshop24 ist offline Mitglied Bronze
    Registriert seit
    May 2006
    Beiträge
    31
    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
     
  4. 07.01.07 14:43 #4
    Maik Tutorials.de Gastzugang
    Hi,

    du könntest das kostenlose Grafikprogramm GIMP verwenden, um eine halbtransparente PNG-Grafik zu erstellen.
     
  5. 07.01.07 14:59 #5
    outdoorshop24 outdoorshop24 ist offline Mitglied Bronze
    Registriert seit
    May 2006
    Beiträge
    31
    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
    Geändert von outdoorshop24 (07.01.07 um 15:03 Uhr)
     
  6. 07.01.07 15:03 #6
    Maik Tutorials.de Gastzugang
    Hast du denn auch die Transparenz (=Deckkraft) für die Füllfarbe eingestellt?
     
  7. 07.01.07 15:14 #7
    outdoorshop24 outdoorshop24 ist offline Mitglied Bronze
    Registriert seit
    May 2006
    Beiträge
    31
    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.
     
  8. 07.01.07 15:27 #8
    Maik Tutorials.de Gastzugang
    Die Transparenz ist sehr wohl vorhanden, nur benötigt der IE6 etwas "Unterstützung", da er transparente PNGs nicht darstellen kann.

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    <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 :
    1
2
3

    <body>
    <div class="box">Box mit transparentem Hintergrund</div>
</body>
     
  9. 07.01.07 15:28 #9
    Avatar von Gumbo
    Gumbo Gumbo ist offline
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.502
    Blog-Einträge
    10
    Benutzt du den Internet Explorer? Der kann nämlich erst seit der Version 7 PNGs mit Transparenz darstellen.
     
    Markus Wulftange
  10. 07.01.07 15:38 #10
    outdoorshop24 outdoorshop24 ist offline Mitglied Bronze
    Registriert seit
    May 2006
    Beiträge
    31
    @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.
     
  11. 07.01.07 15:41 #11
    Maik Tutorials.de Gastzugang
    Du hast das Stylesheet auch nicht vollständig übernommen, denn das DIV-Element benötigt zumindest eine Breitenangabe - diese kann anstelle der fixen Breitenangabe auch width:100% lauten. Zudem hast du die modernen (nicht-IE) Browser ausgeschlossen.
     
  12. 07.01.07 16:06 #12
    Maik Tutorials.de Gastzugang
    Hier der vollständige Quellcode für das Dokument:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Testseite</title>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
 
<style type="text/css">
body {
background-image: url(pictures/site_ground.jpg);
}
 
div.box {
background-image: url(pictures/back.png);
width: 100%;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
div.box {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='pictures/back.png');
}
</style>
<![endif]-->        
 
</head>
<body>
     <div class="box">
        &nbsp;
        <p>TEST</p>
        <p>Herzlich willkommen beim Automobilvertrieb Allg&auml;u, ihrem kompetenten Partner beim Autokauf.</p>
        <p>Wir freuen uns, dass Sie zu uns gefunden haben und m&ouml;chten Ihnen unser Unternehmen auf den<br>
        folgenden Seiten etwas n&auml;her vorstellen.</p>
    </div>
</body>
</html>
     
  13. 07.01.07 20:28 #13
    outdoorshop24 outdoorshop24 ist offline Mitglied Bronze
    Registriert seit
    May 2006
    Beiträge
    31
    Hallo,
    ich habe den obigen Quelltext zur Hilfe genommen und jetzt funktioniert es endlich wie gewünscht. Nochmals vielen Dank!
     
« Darstellungsproblem der Navigation: IE7 | Buchtipp CSS »

Ähnliche Themen

  1. transparenter Teildialog
    Von wieschoo im Forum C/C++
    Antworten: 0
    Letzter Beitrag: 15.01.11, 19:40
  2. Hintergrundfarbe in Container A an Höhe Container B anpassen.
    Von Unique86 im Forum CSS
    Antworten: 4
    Letzter Beitrag: 18.08.08, 11:31
  3. container (div) genauso hoch wie div im container
    Von Razorhawk im Forum CSS
    Antworten: 4
    Letzter Beitrag: 21.02.08, 19:50
  4. 2 Div Container in 1 Div Container Problem
    Von lacie im Forum CSS
    Antworten: 2
    Letzter Beitrag: 16.08.07, 23:13
  5. Transparenter HG (MX)
    Von philyphil im Forum Flash Plattform
    Antworten: 11
    Letzter Beitrag: 21.07.02, 19:42