# DIV mit transparentem Hintergrund



## soezkan (19. März 2011)

Hallo Leute,

ich würde gerne ein DIV erstellen, dass halb-transparent ist. Allerdings nur der
Hintergrund und nicht der Text und Bilder des DIVs.
Also ein gräuliches, halb-durchlässiges DIV, dass aber "knallweißen" Text und ein Logo enthält.

Wie geht sowas?

Ganz lieben Dank für Hilfe!

Soezkan


----------



## threadi (19. März 2011)

Du hast 2 Möglichkeiten:
a) Gib dem Element ein transparentes Hintergrundbild.
b) Bau in das Element 2 weitere Elemente ein. Das eine erhält einen transparenten Hintergrund, das andere den anzuzeigenden Text. Beide kannst Du dann per absolute Positionierung übereinander legen.

Ich würde zu a) raten.


----------



## soezkan (19. März 2011)

Danke! Ich machs mit a)

Liebe Grüße
Soezkan


----------



## soezkan (19. März 2011)

Jetzt habe ich mir eine transparentes PNG erstellt und wenn ich das als Hintergrund einsetze, ist die DIV Box einfach nur grau und verdeckt das Bild dahinter komplett. Also nicht transparent. Was mache ich falsch?

Danke


----------



## threadi (19. März 2011)

Kann man mit den vorliegenden Infos nur raten ..
.. vlt. ist das Bild nicht wirklich transparent.
.. vlt. liegt es auch am HTML- und/oder CSS-Code.
.. vlt. verwendest Du einen Browser ohne Unterstützung für alphatransparente PNGs (z.B. IE6).


----------



## soezkan (19. März 2011)

Sorry für die Ungenauigkeit. 

Ich benutze IE8, FF3.6, GoogleChrome.

Im ANhang ist die transparente PNG-Grafik.

Der Code sieht im Moment so aus:

```
div#mainContainer div#header div#mainNavigationBox {
	background-color: #000000;
	filter: alpha(opacity=40);
	opacity: 0.4;
	-moz-opacity:0.4;
	height: 100px;
	min-height: 100px;
	width: 774px;
	margin: 0 0 0 0;
	padding: 0 36px 0 54px;
}
```

Und wenn ich die transp. Grafik einsetze, dann so:


```
div#mainContainer div#header div#mainNavigationBox {
	background-image: url(images/transbg.png);
	height: 100px;
	min-height: 100px;
	width: 774px;
	margin: 0 0 0 0;
	padding: 0 36px 0 54px;
}
```

Eingebunden wirs so:


```
<body>
<div id="mainContainer">
    <div id="header">
    	<div id="mainNavigationBox">
        	<ul class="links" id="navlist">
<li class="menu"><a href="/seite1">Wir über uns</a></li>
<li class="menu"><a href="/unser-team">Unser Team</a></li>
<li class="menu"><a href="/serviceleistungen">Kundenservice</a></li>
<li class="menu"><a href="/news">News</a></li>
<li class="menu"><a href="/kontakt" title="Kontakt">Kontakt</a></li>
</ul>            <p class="logo">&nbsp;</p>
        </div>
    </div>
```


----------



## soezkan (19. März 2011)

*(ERLEDIGT) AW: DIV mit transparentem Hintergrund*

Es lag am PNG. Irgendwie bin ich zu doof ein PNG das transparent ist zu erzeugen.
Habe ein anderes genommen und entsprechend eingefäbt:
http://www.daltonlp.com/75p_honey.png

Seltsam. Wie erstellt man denn so ein PNG?


----------



## threadi (19. März 2011)

Wie das geht hängt von deiner Grafikbearbeitung ab. Bei Gimp geht es z.B. so wie in der Dokumentation beschrieben.

http://docs.gimp.org/de/gimp-using-web-transparency.html


----------



## hela (21. März 2011)

soezkan hat gesagt.:


> Es lag am PNG. Irgendwie bin ich zu doof ein PNG das transparent ist zu erzeugen...


Hallo,
dann nimm sie einfach von hier: Free PNGs for Creating Transparent Fills


----------

