Results 1 to 7 of 7

Thread: Using Opacity for Background without Text Inheriting it.

  1. #1
    Join Date
    Jun 2009
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Using Opacity for Background without Text Inheriting it.

    Example at http://yhst-40846486608415.stores.yahoo.net/test1.html

    I want the opacity of the background of my top navigation bars set at 80% or some such number si the fence image peeks through it. But I want the text links in the Nav Bars to be fully opaque. I don't seem to be able to keep the <a> tags from inheriting the opacity setting of the containing <td> elements, even when I specifically state an opacity value for them. How can I make this work? Do I need to use a PNG graphic with an alpha channel opacity and deal with all the hacks necessary to get PNG alpha channels working in IE?

    The styles involved are:
    Code:
    .hornav {
    	background-color: #393;
    	filter:alpha(opacity=80);
    	opacity:0.8;
    	-moz-opacity:0.8;
    	height: 24px;
    	border-left: 1px #fff solid;
    	border-bottom: 1px #fff solid;
    	text-align: center;
    }
    .headnav {
    	background-color: #393;
    	filter:alpha(opacity=80);
    	opacity:0.8;
    	-moz-opacity:0.8;
    	height: 24px;
    	border-right: 1px #fff solid;
    	border-top: 1px #fff solid;
    	text-align: center;
    }
    .headnav2 {
    	background-color: #393;
    	filter:alpha(opacity=80);
    	opacity:0.8;
    	-moz-opacity:0.8;
    	height: 24px;
    	border-top: 1px #fff solid;
    	text-align: center;
    }
    
    td.hornav a:link, td.headnav a:link, td.headnav2 a:link {
    	filter:alpha(opacity=100);
    	opacity:1;
    	-moz-opacity:1;
    	font-size: 12px;
    	font-weight: 900;
    	display: block;
    	color: #fff;
    	text-decoration: none;
    	background-color: transparent;
    }
    td.hornav a:visited, td.headnav a:visited, td.headnav2 a:visited {
    	color: #fff;
    	text-decoration: none;
    	background-color: transparent;
    }
    td.hornav a:hover, td.headnav a:hover, td.headnav2 a:hover {
    	color: #ff0;
    	text-decoration: underline;
    	background-color: #393;
    }

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    It seems a little tricky, but maybe you could use rgba colors with a fallback for the background, to at least get the semi-transparency in modern browsers.
    http://css-tricks.com/rgba-browser-support/

  3. #3
    Join Date
    May 2010
    Posts
    10
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    what about containing a div within a div. the outer div would be your semi-transparent bg and the inner div (same width/height as outer) will be opacity:100; but have no bg and only text.

  4. The Following User Says Thank You to BuildMyWeb For This Useful Post:

    ETpro (09-17-2010)

  5. #4
    Join Date
    Jun 2009
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BuildMyWeb View Post
    what about containing a div within a div. the outer div would be your semi-transparent bg and the inner div (same width/height as outer) will be opacity:100; but have no bg and only text.
    I thought this would be the salvation, but finally got time to try it, and nothing doing. Even then the silly thing inherits all the way from the outer DIV. I'm just going to use a PNG background and the people who insist on using that piece of junk called IE, expecially before versin 7, will not see the beauty of the wonderful but subtle alpha transparency. Thet's what they get for using a dumnb browser. :-)

  6. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,807
    Thanks
    1
    Thanked 253 Times in 248 Posts

    Default

    Hi there ETpro,

    Check out these examples, one of them may help...

    1. very basic:-
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title></title>
    
    <style type="text/css">
    body {
        background-color:#00f;
     }
    #container {
        position:relative;
        width:440px;
        margin:auto;
     }
    #faded {
        width:400px;
        height:360px;
        padding:40px;
        background-color:#f00;
        border:4px solid #000;
        opacity:0.30;
        filter:alpha(opacity=30);
        font-size:30px;
        font-weight:bold;
        text-align:center;
     }
    #unfaded {
        position:absolute;
        z-index:1;
        left:84px;
        top:189px;
        width:300px; 
        padding:10px;   
        border:2px solid #000;
        font-size:30px;
        font-weight:bold;
        text-align:center;
        background-color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="faded">this area is effected by opacity</div>
    
    <div id="unfaded">this area is unaffected</div>
    
    </div>
    
    </body>
    </html>
    
    2. more involved:-
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body{
        background-color:#000;
     }
    #box{
        width:770px;
        height:535px;
        margin:30px auto;
        border:5px double #f60;
        background-image:url(http://www.coothead.co.uk/images/buddha.jpg);
        background-repeat:no-repeat;
     }
    #container{
        position:relative;
        width:326px;
        height:202px;
        padding:1px;
        border:3px inset #333;
        margin:162px auto 0;
     }
    #background {
        position:absolute;
        width:324px;
        height:170px;
        padding-top:30px;
        background-color:#f93;
        opacity:0.4;
        filter:alpha(opacity=50);
        font-size:20px;
        font-weight:bold;
        text-align:center;
     }
    #foreground {
        position:absolute;
        width:324px;
        border:1px solid #000;
        line-height:200px;
        font-size:20px;
        font-weight:bold;
        text-align:center;
     }
    </style>
    
    </head>
    <body>
    
    <div id="box">
    
    <div id="container">
     <div id="background">This is the Background</div>
     <div id="foreground">This is the Foreground</div>
    </div>
    
    </div>
    
    </body>
    </html>
    
    coothead

  7. #6
    Join Date
    Jun 2009
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Those would work for most designs, but this one is a fluid design, expanding to fill available space. Doing fluid design with relative and absolute positioning can get to be a real PITA. I pretty much need to keep the text and background within a single containing element, not float one above the other with absolute positioning.

  8. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,807
    Thanks
    1
    Thanked 253 Times in 248 Posts

    Default

    Hi there ETpro ,

    if it is fluidity that you're after, then check out the attachment.
    The example within has no width or height values whatsoever.

    coothead

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
  •