SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Make a div opaque BUT NOT the images within it?

    I managed to make my div opaque, but the problem is that it's also making everything inside the div opaque! Is there any way to exlude images within my div from being opaque?

    Thanks!
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    maybe you can use these two demo's
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>opacity</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	*{margin:0;padding:0;}
    	
    	body{font-size:75%;}
    	
    	div,p{font-size:1em;font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;}
    	
    	.wra{position:relative;height:20em;width:30em;float:left;}
    
    	.bot p,.top p,.wra p{padding:1em;}
    	
    	.top{
    	position:absolute;
    	width:30em;
    	height:20em;
    	left:0;
    	top:0;
    	background:#ff0000;
    	}
    	
    	.bot{
    	position:absolute;
    	width:20em;
    	height:10em;
    	left:5em;
    	top:5em;
    	background:#ffff00;
    	}
    	
    	.op1{filter:alpha(opacity=10); -moz-opacity:.10;opacity:.10; -khtml-opacity:.10; }/*this s u c k s*/
    	.op2{filter:alpha(opacity=20); -moz-opacity:.20;opacity:.20; -khtml-opacity:.20; }/*this s u c k s*/
    	.op4{filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40; -khtml-opacity:.40; }/*this s u c k s*/
    	.op6{filter:alpha(opacity=60); -moz-opacity:.60;opacity:.60; -khtml-opacity:.60; }/*this s u c k s*/
    	
    	.ca{background:#ffff00;}
    	.cb{background:#ff0000;}
    	.cc{background:#0000ff;}
    	.cd{background:#cc99ff;}
    	</style>
    </head>
    <body>
    
    <div class="wra">
    
    <div class="bot op6">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="top op4">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    
    <div class="wra">
    
    <div class="top op6">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="bot op4">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    
    <div class="wra cc">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <div class="bot op6">
    <p>xx Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="top op4">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    
    <div class="wra">
    
    <div class="top">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="bot op6">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    <div class="wra">
    
    <div class="top">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="bot">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    
    <div class="wra">
    
    
    <div class="bot">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    <div class="top op6">
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    <p>Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text </p>
    </div>
    
    </div>
    
    
    <!--  -->
    
    </body>
    </html>
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	.placeholder,.overlay{
    	left:0;top:0;
    	background:#ffffcc;
    	width:200px;
    	height:200px;
    	z-index:1;
    	position:relative;
    	}
    	
    	.overlay{
    	z-index:2;
    	margin:-200px 0 0 0;
    	}
    	
    	img{display:block;border:none;}
    	
    	.featured-box{position:relative;}
    	
    	.a{
    	left:220px;top:0px;
    	position:absolute;
    	margin:0 0 0 0;
    	}
    	.aa{
    	left:0;top:0;
    	position:absolute;
    	margin:0 0 0 0;
    	}
    	.zb{z-index:200;}
    	
    	.al{filter:alpha(opacity=70); -moz-opacity:.70;opacity:.70; -khtml-opacity:.70; }
    	
    	.featured-box{width:210px;height:200px;background:#ff6600;}
    	
    	.xx{width:0;height:0;top:-800px;left:200px;}
    	</style>
    </head>
    <body>
    
    <div class="featured-box">
    <div class="placeholder zb"><img src="xx.jpg" alt="<?=$title?>" width="200" height="200" /></div>
    <div class="overlay"><img src="design.gif" alt="<?=$title?>" width="200" height="200" class="al" /></div>
    </div>
    
    
    <div class="placeholder zb"><img src="xx.jpg" alt="<?=$title?>" width="200" height="200" />
    <div class="overlay al"><img src="design.gif" alt="<?=$title?>" width="200" height="200" /></div>
    </div>
    
    
    <div class="placeholder"><img src="xx.jpg" alt="<?=$title?>" width="200" height="200" />
    <div class="overlay aa al"><img src="design.gif" alt="<?=$title?>" width="200" height="200" /></div>
    </div>
    
    <div class="featured-box">
    <div class="placeholder a zb al"><img src="xx.jpg" alt="<?=$title?>" width="200" height="200" /></div>
    <div class="overlay a"><img src="design.gif" alt="<?=$title?>" width="200" height="200" /></div>
    </div>
    
    <div class="featured-box xx">
    <div class="placeholder a"><img src="xx.jpg" alt="<?=$title?>" width="200" height="200" /></div>
    <div class="overlay a al"><img src="design.gif" alt="<?=$title?>" width="200" height="200" /></div>
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could very well be missing something, but neither one of those examples did what I am trying to do (which may not even be possible).

    I was hoping there was a way to exclude certain elements in a css rule, if that makes sense. Such as:

    #opaque_div -img{filter:alpha(opacity=50);opacity:.50;}

    where "-img" would be the bit to exlude images from the rule.

    Thanks!
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    all elements wrapped by the (opacity) div have the opacity

  5. #5
    SitePoint Evangelist jimday1982's Avatar
    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And there is no way around this, correct?
    Jimmy Day
    Senior Systems Analyst
    Piedmont Healthcare Corporation

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    wrapped No, you have to use a new/other element on top ,(a new layer)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •