[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

CSS Color Overlay

I have an Intranet that restricts users to FireFox 4+ and IE8+

How can I apply a color overlay to my attached button style?
.RadUploadButton, .ButtonMedium
{
    border-style: none;
    border-color: inherit;
    border-width: 0px;
    background: white url('Images/radUploadBtnMedium.gif') no-repeat;
    width: 115px;
    font: normal 11px Arial, Verdana, Sans-serif;
    color: #666;
    height: 22px;
}

Open in new window

0
lrbrister
Asked:
lrbrister
  • 2
  • 2
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
What are you calling a color overlay? Please explain.
0
 
lrbristerAuthor Commented:
the image Images/radUploadBtnMedium.gif is the actual buton background image
I want to reuse the class and apply overlay alpha transparencies (50%) different colors for different buttons

So...there'll be a ButtonMediumR, ButtonMediumG, ButtonMediumB etc...

Not my idea at all...but the sales team is insisting on the same "look" just different overlays

I don't wnat to keep recreating button images either.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
You'd have to use separate css for Firefox and IE. Firefox supports opacity (0-1) and IE supports filter: alpha(opacity) (0-100).

Firefox 50% opacity:
div.pct50 { opacity: 0.5; }

Open in new window

IE 50% alpha
div.pct50 { filter: alpha(opacity=50); }

Open in new window

0
 
lrbristerAuthor Commented:
Thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now