Transparent Div but not Transparent Text?

Forum Moderators: not2easy

Message Too Old, No Replies

Transparent Div but not Transparent Text?

How to get transparent div but not the text.

FrenchFrysable

1:38 am on Sep 30, 2010 (gmt 0)

This is an old question but I'm looking for a purely css solution to get a transparent div but having it not apply to my text. Any suggestions?

Major_Payne

6:32 am on Sep 30, 2010 (gmt 0)

If you set the div it doesn't target your text. If using images and the CSS opaque properties for browsers, you might have to pay attention a little more so the image and text don't become opaque together.

Not enough details to say more.


<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Test</title>

<meta name="created" content="Thu, 30 Sep 2010 06:25:36 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="copyright" content="Jan 2004 to present.">

<style>
body {
background: #000;
}

#trans_bg {
width: 400px;
height: 400px;
margin: 0 auto;
background: transparent;
font-family: arial, sans-serif;
font-size: 1em;
text-align: justify;
padding: 5px;
color: #0f0;
border: 1px solid #f00;
}
</style>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="trans_bg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus tristique metus, vitae porttitor enim elementum ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras at odio odio. Quisque sed erat mauris, vestibulum hendrerit ligula. In sagittis, leo porta facilisis aliquam, lorem lorem sagittis urna, scelerisque semper sem lorem eget neque. Cras lobortis, elit id euismod bibendum, nisl tortor suscipit risus, eget sagittis nunc lacus eget urna. Donec ut tellus libero. Suspendisse id lacus ac lorem egestas hendrerit. In pulvinar lectus ac arcu aliquam a vulputate arcu fermentum. Proin vulputate tortor id velit posuere pellentesque. Aenean eros risus, ultrices eget ultricies eu, faucibus vel risus. Praesent et metus tellus, eget luctus quam. Maecenas faucibus imperdiet malesuada. Etiam varius faucibus orci quis blandit. Donec non rutrum purus. Nulla lobortis leo vitae urna adipiscing nec aliquam quam vestibulum. Ut convallis sollicitudin sem, id auctor lectus commodo ac. </p>
</div>
</body></html>
<!-- HTML 5 Folder | Default HTML -->

Ron

futureX

10:25 am on Sep 30, 2010 (gmt 0)

I use a transparent PNG as the background image to get around this issue, if I understand right that what you mean is you want a partially transparent DIV background and fully opaque text.

milosevic

12:37 pm on Sep 30, 2010 (gmt 0)

Yes, I don't really understand the question, because I would understand that as standard behaviour.

FrenchFrysable, you understand the difference between color and background-color right? If you set "color:transparent" that sets the colour of text in the div to transparent, not the colour of the background of the div.

Major_Payne

5:20 pm on Sep 30, 2010 (gmt 0)

For a div with only a hex color code, there's no need to use any images except for the specific effects you can get with opacity. "background: transparent;" can be used and the background color of the page will "show through" the div. Kinda a waste to code this way if all you want is a div with the same background color as the body of the page. Works fine if you want to view a BG image "through" the div with the text over the image for some effect.

swa66

8:48 pm on Sep 30, 2010 (gmt 0)

To get a translucent background CSS3 has colors you can use on either text, background, border etc. that have alpha channel on it to allow you to specify the translucency yourself.

It was in the old CCS3 series on here in the series I did back then with suzy (my bookmark was [webmasterworld.com...] but unfortunately that seems to not be online anymore for some odd reason.
[even if it's still referenced in the library]

Google for "rgba" ...