Page 1 of 1

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

Posted: Wed Jun 29, 2011 10:13 am
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?

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

Posted: Wed Jun 29, 2011 10:36 am
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/

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

Posted: Wed Jun 29, 2011 11:28 am
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.

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

Posted: Mon Jul 11, 2011 2:00 am
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;
}