#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2

    Embedded divs with transparency


    Hello. I have a div (#main) whose background's opacity is set to 50%. I have nested divs within that that are taking on the same opacity. Is there a way to override that so the interior divs are opaque? I want the backgrounds to be solid white.

    Thanks for all help!


    CSS
    Code:
    #main{
    	max-width:950px;
    	height: 800px;
    	top:200px;
    	margin-left: auto;
    	margin-right: auto;
    	border:8px solid gray;
    	border-radius: 14px;
    	background-color: #efefef;
    	box-shadow: 0px 8px 10px #000000, -10px 8px 15px #000000, 10px 8px 15px #000000;
    	opacity:0.5;
            filter:alpha(opacity=50); /* For IE8 and earlier */
    	
    }
    
    #box1 {
    	width: 272px;
    	float: left;
    	padding: 5px 15px;
    	border:1px solid gray;
    	border-radius: 14px;
    	background-color: #efefef;
    }
    
    #box2 {
    	width: 272px; /* Account for margins + border values */
    	float: left;
    	padding: 5px 15px;
    	margin: 0px 5px 5px 5px;
    	border:1px solid gray;
    	border-radius: 14px;
    	background-color: #efefef;
    }
    
    #box3 {
    	width: 272px;
    	padding: 5px 15px;
    	float: left;
    	border:1px solid gray;
    	border-radius: 14px;
    	background-color: #efefef;
    }
    HTML
    Code:
    <div id="main">
    
    <div id="box1">
    		<h2>Box1</h2>
    		<p>TEST</p>
    </div>
    	
    <div id="box2">
    		<h2>Box2</h2>
    		<p>TEST</p>
    </div>
    
    <div id="box3">
    		<h2>Box3</h2>
    		<p>TEST</p>
    </div>
    
    </div> <!-- End Main Div -->
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    (oops, the answer I gave was incorrect, sorry. Removing ).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    695
    Rep Power
    441
    As you've discovered, when you apply opacity it applies to everything within it. It looks like you're just trying to achieve a semi-transparent background? If that's the case you can define your colors as rgba() (red, green, blue and alpha).

    So #efefef at 50% transparent in rgba would be background: rgba(239, 239, 239, .5);
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    67
    Rep Power
    0
    And for IE8 you can use the gradient filter. Its a pain to do by hand, so I always use this handy tool.

    http://www.colorzilla.com/gradient-editor/

    It works for IE8+

IMN logo majestic logo threadwatch logo seochat tools logo