www.webdeveloper.com
Results 1 to 4 of 4

Thread: css opacity

  1. #1
    Join Date
    Sep 2004
    Posts
    24

    css opacity

    I've got a problem with opacity and would appreciate some help. In a header, I have a background image, some links, a navigation bar with opacity, and then links within the navigation bar. But, I don't want the links on the navigation bar to have opacity. I've researched and tried numerous things, but can't seem to find the magic. Any help appreciated. Here's the css and I've provided a link to an image of the problem. (real stuff is on a development site, with themes, master pages, etc., and doesn't have a dns beyond our firewall)

    http://www.mahec.net/images/a.jpg

    Here's the css:

    Code:
    body  {
        margin:0 auto;
        padding:0;
        background: #DCE9E8 url(http://www8.mahec.net/images/body_bg2.gif) left top repeat-x; 
        font:normal 13px Arial;
    }
    
    #maincontainer{ 
        
        width: 800px; /*Width of main container*/
        margin: 0 auto; /*Center container on page*/
        background:#F8F8F1 url(http://www8.mahec.net/images/contentBG2.gif) left top repeat-y;
        border:solid 1px #666666;
        overflow-x: hidden;
    }
    
    #topsection{  /*header container, centering everything within*/
        position:relative;
        margin-right:0;
        margin-left:0;
        padding:0;
        background: #DCE9E8 url(http://www8.mahec.net/images/banner.jpg) right top no-repeat;
        overflow-x: hidden;
        height: 120px; /*Height of top section*/
    }
    */ links at top right within header */
    .header { float:right;display: inline;color:#336666; margin:5px 5px 0 0;} 
    .header A:link,  A:visited {color : #336666; text-decoration : none;border:none;padding :0 0 0 0;}
    .header A:hover {text-decoration:none;border:none;padding :0 0 0 0;  
    } 
    
    #topsection #topbar {
        position:fixed;
        margin-right:0;
        margin-left:0;
        margin-top:94px;
        padding:0;
        width:800px;
        text-align:center;
        background:#78658c;
     	filter:alpha(opacity=60);-moz-opacity:.60; opacity: 0.6;
    	border-top:solid 1px #000000;
    	border-bottom:solid 1px #000000;
    	font-weight:bold;
    	height:25px;
    }
    
    #topsection #topbar #toplink {
        z-index:1;
        color:#ffffff;
    }
    
    #topsection #topbar #toplink  a {
    	text-decoration:none;
    	color:#ffffff;
    	font-weight:bold;
    	line-height:2em;
    	padding:3px 10px;	
    }
    
    #topsection #topbar #toplink  a:hover {
    	text-decoration:none;
    	color:#ffffff;
    	font-weight:bold;
    	line-height:2em;
    	padding:3px 10px;
    	background:#F9F9E4;
    	color:#593F72;
    	margin:-5px 0 -5px 0;
    }

  2. #2
    Join Date
    Jan 2009
    Posts
    42
    The best way to fix this is to just take a snap of that image, and set it as the background for the div. Then you can just put your text on top of that. This way, you are not doing a lot of complex css, and your links won't be opaque either.

  3. #3
    Join Date
    Sep 2004
    Posts
    24
    Perhaps that's "fastest" and not best? Appreciate the response, but I'd like to try for the opacity first if anyone has a response. Graphic designed will be changing the background image for the header on a regular basis, and I'd like to eliminate her having to create multiple images, make sure the opactiy changes, be sure the sizes are right, etc.

  4. #4
    Join Date
    Sep 2004
    Posts
    24
    Got a nice response elsewhere explaining the solution here: http://www.css-lab.com/misc-test/no-text-opacity.html Hope someone else finds it as useful....

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles