How do you make DIV transparent, but not the text in it

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do you make DIV transparent, but not the text in it

Post by simonmlewis »

Code: Select all

.transparent
{
   filter:alpha(opacity=60);
   -moz-opacity: 0.6;
   opacity: 0.6; 
}
This sets a box to be transparent, but it also has the effect on the text/links in it. How do you stop that from happening?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: How do you make DIV transparent, but not the text in it

Post by Weirdan »

well, then you don't need transparent box. what you seem to need is a box with semi-transparent background, like this: http://www.css3.info/introduction-opacity-rgba/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you make DIV transparent, but not the text in it

Post by simonmlewis »

Code: Select all

	background-color: rgba(66,39,131,0.75);
	padding-top: 13px;
	width: 850px;
	height:31px;
	text-align:center; 
	position: fixed;
	top: 0px; 
	left: 50px; 
	right: 50px; 
	margin-left: auto; 
	margin-right: auto; 
	width: 891px;
Great stuff, this now works brilliantly. Stays at the top centre, purple, slightly transparent and controlable.

Thanks.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
webtechie
Forum Newbie
Posts: 2
Joined: Mon Jul 11, 2011 1:27 am

Re: How do you make DIV transparent, but not the text in it

Post by webtechie »

Please use transparent .gif or .png image

html:
<div class="transparent">text here</<div>

css:
.transparent{
background:url(img.png) 0 0 repeat;
}
Post Reply