CSS Color Overlay

Posted on 2011-10-20
Last Modified: 2012-05-12
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

Question by:lrbrister
    LVL 21

    Expert Comment

    by:Kim Walker
    What are you calling a color overlay? Please explain.

    Author Comment

    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.
    LVL 21

    Accepted Solution

    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


    Author Closing Comment


    Featured Post

    Maximize Your Threat Intelligence Reporting

    Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

    Join & Write a Comment

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    731 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now