PDA

View Full Version : Resolved Anchor Background Opacity without applying Opacity to the Text



dylanbaumannn
Feb 28th, 2012, 08:54 PM
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
(http://go.prevue.it/view/bzbq3)
And this is what it currently looks like:
http://methodistphysiciansclinic.com/index.cfm?event=clinic/192-dodge
(http://methodistphysiciansclinic.com/index.cfm?event=clinic/192-dodge)



My HTML:


<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)


<ul class="nav" id="subnav">
<cfoutput>#event.printNavList(skipLevels=1)#</cfoutput>
</ul>

My CSS:



#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!

VIPStephan
Feb 29th, 2012, 01:38 AM
Either use a semi-transparent image as background (e. g. a 11 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.

Sammy12
Feb 29th, 2012, 01:41 AM
rgba does work for ie6 and above for backgrounds

RGBA & HSLA IE Converter (http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer)

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

dylanbaumannn
Feb 29th, 2012, 03:45 PM
Thank you very much VIPStephan, I had completely forgotten about the RGBA method (head smack). Works perfect now :D

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!

dylanbaumannn
Feb 29th, 2012, 04:22 PM
ermmm the prefix option has seemed to have run away from me... where is the close thread option?

VIPStephan
Feb 29th, 2012, 05:27 PM
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. ;)