Transparent box, with non-transparent text?

HTML & CSS
1

Hi,

I’m trying to have a transparent background with non-transparent text…

Right now the following solution makes the text and background a little more transparent. I really would like full colour text and transparent bg.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test CSS Text</title>
<style type="text/css">
.box1 {
	background:#000;
	color:#fff;
	width:191px;
	height:122px;
	/* for IE */
	filter:alpha(opacity=60);
 	/* CSS3 standard */
 	opacity:0.6;
}
</style>
</head>
<body>
<div class="box1">Test text</div>
</body>
</html>

Is there an easy way around this?

Thanks for any advice.

2

I don’t think its possible with just css. You could create 2 divs and position the text div absolute overtop of the transparent div. But, that would probably defeat the purpose of what you are trying to do.

3

Thanks for the reply.

I thought as much. I think I’ll just try stick in a darker background image.

Thanks!

4

Im not sure if I am 100% understanding you. Does something like this not do what you are after?

Here is a quick and very dirty example for you!


<html>
	<head>
		<title>CSS Transparency Test</title>
		
		<style type="text/css">
			#box1{
			background:transparent;
			}	
			
			body{
			background-color:#ff9966;
			}
			
			#box1 p{
			font-weight:bold;
			color:#000000;
			font-family:arial;
			}
		</style>
	</head>
<body>
	<div id="box1">
		<p>Some text in my transparent box</p>
	</div><!-- box1 -->
</body>
</html>
5

Is there an easy way around this?

Use a transparent background image png instead.:slight_smile:

e.g.
http://www.pmob.co.uk/temp/dropdown-round-transparent.htm

The only problem is that you have to use the alpha image loader for ie6 which complicates things a little bit but other browsers are straight forward.

More examples:
http://www.pmob.co.uk/temp/transparent-test4.htm

6

Brilliant Paul. I will keep this in mind.

I had thought of just using a background image instead and hoping it works with the main background image :slight_smile:

7