[CSS]Transparant?

Door steen op 31-01-2010 15:59

3.459 views

Ik heb een klein stukje code om een div transparant te maken, alleen nu neemt hij de tekst ook mee. Hoe kan ik de tekst wel gewoon "normaal" zichtbaar laten zijn?


<style>
.trans {
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
}
</style>
<div class="trans" style="display:block; background-color:#000;width:250px; height:82px; padding-top:18px;">
<span style="padding-left:10px;color:#dff4ff;font-size:42px; font-weight:bold;">Woord1</span>
<span style=" font-weight:bold;color:#FFF;font-size:42px;">Woord2</span>
</div>

PHP Scripter

31-01-2010 16:01

http://www.w3schools.com/Css/css_image_transparency.asp

s steen

31-01-2010 16:03

Daar is de tekst net zo goed transparant als de achtergrond of niet? Zo niet, hoe pas je dat dan hier toe?

P P Lekensteyn

31-01-2010 16:07

Het kan niet.
Om een transparante achtergrond te hebben, maak een png of gif afbeelding.

s steen

31-01-2010 16:10

Nog even verder gezocht, en het kan dus wel peter.


<html>
<head>
<style type="text/css">
body
{
	background:url('info.png');	
}
.transbox
{
	width: 400px;
	height: 180px;
	margin: 30px 50px;
	background-color: #000000;
	border: 1px solid black;
	filter:alpha(opacity=60);
	opacity:0.6;
}
.text p
{
	margin: 30px 40px;
	font-weight: bold;
	color: #FFFFFF;
}
.text
{
	position: absolute;
	top: 30px;
	left: 50px;
}
</style>
</head>
<body>
<div class="transbox"></div>
<div class="text"><p>Hello World</p></div> 
</body>
</html>

Reageren

Inloggen om te reageren