Div opacity problem

Question

bubbafunk1 0 Newbie Poster

14 Years Ago

I have my wrapper background colour set with an opacity of 80% using this code

#wrapper {
background: #ffffff;	
opacity: 0.8;
filter:alpha(opacity=80);
-moz-opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-khtml-opacity: 0.8;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}

It works fine but everything inside of the wrapper is now set to 80% opacity. I have two divs .left and .right and everything including their backgrounds, images, text etc is set to 80% opacity. Is there a workround? something simple that I a missing?

Any ideas much appreciated.

Kevin

web-design

6 Contributors
12 Replies
470 Views
1 Year Discussion Span
Latest Post 12 Years Ago Latest Post by Raven Boris

MattyRobot 22 Junior Poster in Training

14 Years Ago

this might work:

#wrapper {
background: #ffffff;	
opacity: 0.8;
filter:alpha(opacity=80);
-moz-opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-khtml-opacity: 0.8;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}

#wrapper *
{
opacity: 1;
filter:alpha(opacity=100);
-moz-opacity:100;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-khtml-opacity: 0.8;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
}

the * means everything

Edited 14 Years Ago by MattyRobot because: n/a

MattyRobot 22 Junior Poster in Training

14 Years Ago

no it works for css i tried it and it did work
the #wrapper * means everything inside wrapper
so wrapper opacity 80%
everything inside 100%

Edited 14 Years Ago by MattyRobot because: n/a

almostbob 866 Retired: passive income ROCKS

14 Years Ago

bubbafunk
Yes * means everything BUT Context is King

elementA {space} * means everything that is a child of elementA
just as the robot has written
why it didnt work, for YOU, will have to wait till a guru comes along, I dunno

Edited 14 Years Ago by almostbob because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

bubbafunk1 0 Newbie Poster · Answer 1 · 2010-07-19T01:01:00+00:00

Thanks for your reply, I tried it but it does not work, i think the * sign is used in mysql where it means everything or all. I only want the the wrapper to have an 80% opacity, not the other divs inside of it. I just need a work around for that problem.

bubbafunk1 0 Newbie Poster · Answer 2 · 2010-07-19T01:48:48+00:00

I have set the back grounds of .left and .right to #ffffff, and used the css like this

#wrapper {
	width: 860px;
	margin-left: auto;
	margin-right: auto;
	padding-right: 5px;
	padding-left: 5px;
	background: #ffffff;	
	opacity: 0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	-khtml-opacity: 0.8;
	-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
	}
	
	
#wrapper * {
	opacity: 1.0;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	-khtml-opacity: 1.0;
	-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
	}

Its not working, have i done something wrong?

MattyRobot 22 Junior Poster in Training · Answer 3 · 2010-07-19T02:05:31+00:00

could I see the html as well as there doesn't appear to be anything wrong with the css

bubbafunk1 0 Newbie Poster · Answer 4 · 2010-07-19T02:55:56+00:00

Here is the html,thpough everything looks and works fine with the html, except the opacity issue.

<body>

<div id="wrapper">

<div id="left">
  <img src="images/logo.jpg"  width="163" height="132" class="des_logo" />
 
<ul class="side_nav">

<li class="main_nav"> <a href="#">Company Profile<br/> 
<span class="main_nav_2">A bit about our company</span></a></li>

</ul>
 
</div>
<div id="right"> 
<div id="top">
<div class="top_nav">

    <ul>
    <li><a href="#"> Home</a> </li>
    <li><a href="#"> Contact</a> </li>
    </ul>
    
</div>
<div class="top_tels">Bristol: <span class="tels">000000000</span> | Bath: <span class="tels">00000000</span> | Mendip: <span class="tels">00000000</span></div>
</div> 

<div id="flash">
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="645" height="250">
    <param name="movie" value="header_v2_3.swf" />
    <param name="quality" value="high" />
    <embed src="header_v2_3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="645" height="250"></embed>
  </object>
</div>

<div id="page_headers">Home</div> 
<div id="content">
   <p>here is some content text</p>
</div>

</div>

<div id="footer">

<div class="address">
<p> address</p>
  <div class="footer_tels">
 <p> Tel: 000000</p>
  
</div>
  
</div>
</div> 
</body>
</html>

MattyRobot 22 Junior Poster in Training · Answer 5 · 2010-07-19T18:57:07+00:00

no offence but the code is a little messy.

there were a few mistakes where some elements were not closed and there was not starting <html> tag

I have indented the code and fixed the issues and it renders correctly in firefox (i checked the opacity with firebug :P)

<html>
	<head>
		<style type="text/css">
			#wrapper {
				width: 860px;
				margin-left: auto;
				margin-right: auto;
				padding-right: 5px;
				padding-left: 5px;
				background: #ffffff;	
				opacity: 0.8;
				filter:alpha(opacity=80);
				-moz-opacity:0.8;
				filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				-khtml-opacity: 0.8;
				-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
				}
				
				
			#wrapper * {
				opacity: 1.0;
				filter:alpha(opacity=100);
				-moz-opacity:1.0;
				filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
				-khtml-opacity: 1.0;
				-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
				}
		</style>
	</head>
	
	<body>

		<div id="wrapper">

			<div id="left">
				<img src="images/logo.jpg"  width="163" height="132" class="des_logo" />
				 
				<ul class="side_nav">

					<li class="main_nav">
						<a href="#">Company Profile<br/> 
						<span class="main_nav_2">A bit about our company</span></a>
					</li>

				</ul>
			 
			</div>
			<div id="right"> 
				<div id="top">
					<div class="top_nav">

						<ul>
							<li><a href="#"> Home</a></li>
							<li><a href="#"> Contact</a></li>
						</ul>
						
					</div>
					<div class="top_tels">Bristol: <span class="tels">000000000</span> | Bath: <span class="tels">00000000</span> | Mendip: <span class="tels">00000000</span></div>
				</div> 

				<div id="flash">
					<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="645" height="250">
						<param name="movie" value="header_v2_3.swf" />
						<param name="quality" value="high" />
						<embed src="header_v2_3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="645" height="250"></embed>
					</object>
				</div>

				<div id="page_headers">Home</div> 
				<div id="content">
				   <p>here is some content text</p>
				</div>

			</div>

			<div id="footer">

				<div class="address">
					<p> address</p>
					<div class="footer_tels">
						<p> Tel: 000000</p>
					  
					</div>
					  
				</div>
			</div> 
		</div>
	</body>
</html>

vee_liang 14 Light Poster · Answer 6 · 2010-07-20T12:13:20+00:00

Basically whatever it is that you wrote on "main layer" will be inherited to all its sub-layers. e.g:

HTML code:

<div id="container">
    <div id="content">
      Some text that are supposed to be on top of a "rather transparent" background
    </div>
</div>

CSS code:

#container {
   background-color: #ffffff;  /* the background          */
   filter:alpha(opacity=50);   /* Internet Explorer       */
   -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
   opacity: 0.5;               /* newer Mozilla and CSS-3 */
}
#content {
   filter:alpha(opacity=100);  /* discarded */
   -moz-opacity:1.0;           /* discarded */
   opacity: 1.0;               /* discarded */
}

All sub-layers within the container layer inherit the container layer's nature so all of the text on content layer in my case will have 50% opacity. This your issue I supposed hope you know have a better understanding on your issue. As for the solution to it, well there are some ways but I let your imagination and creativity to solve your own issue. I'll show the simplest workaround for your issue which is by rearranging your layers.

HTML code:

<div id="container">

   <div id="content">
      This is a normal text
      on a translucent background
   </div>

   <div id="background">
       
   </div>

</div>

CSS code:

#container {
   position: absolute;
   top: 10px; left: 25px;         /* place it where you want     */
}

#background {
   width: 250px; height: 100px;     /* to match DIVs size          */
   background-color: #ffffff;       /* the background              */
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   opacity: 0.5;
}

#content {
   width: 250px; height: 100px;     /* to match DIVs size          */
   background-color: transparent;   /* transparent background      */
   position: absolute;              /* absolute positioning        */
   z-index: 2;                      /* place it over the other DIV */
}

MattyRobot 22 Junior Poster in Training · Answer 7 · 2010-07-21T00:42:11+00:00

or the generic #wrapper * applies to anything inside wrapper rather than specificly setting the opacity for every child element.

dzandman 0 Newbie Poster · Answer 8 · 2010-12-29T06:11:19+00:00

Hi Vee-
Not sure if you'll see this, but I was hoping you might be able to help me implement your solution with the JS Accordion (my site is dzandman.com). I can't figure out how to change the div names that the JS uses without breaking the whole thing.

Thanks!
David

Raven Boris 0 Newbie Poster · Answer 9 · 2012-06-05T17:21:37+00:00

Try this:

background-color: rgba(255, 255, 255, 0.5);