DIV mit transparentem Hintergrund

soezkan

soezkan

Erfahrenes Mitglied
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
 
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.
 
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
 
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).
 
Sorry für die Ungenauigkeit. :eek:

Ich benutze IE8, FF3.6, GoogleChrome.

Im ANhang ist die transparente PNG-Grafik.

Der Code sieht im Moment so aus:
PHP: 
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:

PHP: 
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:

PHP: 
<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>
 

Anhänge

  • transbg.png
    transbg.png
    41,1 KB · Aufrufe: 500
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück