Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Anchor Background Opacity without applying Opacity to the Text

    Hello!

    I'm currently doing some front-end development for a website I've been working on and I've run into a small issue: I need to apply an opacity to the background of an anchor without applying that opacity to the text inside the anchor.

    (it's the buttons in the upper right that say "Services, About, etc"
    Below is what the navigation is supposed to look like:
    http://go.prevue.it/view/bzbq3

    And this is what it currently looks like:
    http://methodistphysiciansclinic.com/index.cfm?event=clinic/192-dodge




    My HTML:
    Code:
    <ul class="nav" id="subnav">
       <li class="services">
           <a href="#">Services</a> 
       </li>
       <li class="about">
           <a href="#">About</a> 
       </li>
    </ul>
    (which is actually generated through ColdFusion)
    Code:
    <ul class="nav" id="subnav">
        <cfoutput>#event.printNavList(skipLevels=1)#</cfoutput>
    </ul>
    My CSS:

    Code:
    	#subnav{
    		text-align:right;
    		height:33px;
    		float:right;
    		padding:10px 0;
    	}
    	ul#subnav.nav li{
    		display:block;
    		float:left;
    		margin:10px 0 0 10px;
    	}
    	ul#subnav.nav li:last-child{
    		margin-right:21px;	
    	}
    	/* doing it this way causes the text to also become transparent
    	ul#subnav.nav li.about a{
    		color:#ffffff;	
    	} */
    	
    	ul#subnav.nav li a{
    		opacity:.5;
    		padding:12px 9px;
    		background:#fff;
    		border-radius:3px;
    		-webkit-border-radius:3px;
    		-moz-border-radius:3px;			
    	}
    any help would be greatly appreciated! Thanks!
    Last edited by VIPStephan; 02-29-2012 at 04:28 PM. Reason: resolved

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Either use a semi-transparent image as background (e. g. a 1×1 px white image with transparency) or use a rgba background color value, like: background-color: rgba(255,255,255,.5);. The latter one isn’t working in older browsers including IE 8, though.

  • Users who have thanked VIPStephan for this post:

    dylanbaumannn (02-29-2012)

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    rgba does work for ie6 and above for backgrounds

    RGBA & HSLA IE Converter

    however, it does not work for anything else, for instance border: 1px solid rgba(0, 0, 0, .5);
    there is no ie filter for that
    Last edited by Sammy12; 02-29-2012 at 12:47 AM.

  • Users who have thanked Sammy12 for this post:

    dylanbaumannn (02-29-2012)

  • #4
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Thank you very much VIPStephan, I had completely forgotten about the RGBA method (head smack). Works perfect now

    Also thanks to you Sammy for the IE converter, I was worried about the backwards compatibility of the site (they have machines in their accounting area still boasting Windows 1998 haha)

    I'll mark this as resolved!

  • #5
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    ermmm the prefix option has seemed to have run away from me... where is the close thread option?

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    You can change the thread title to “resolved” within a certain amount of time by editing your first post. If that time frame is exceeded you can’t edit it anymore. And that’s why I’m here.


  •  

    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
    •