SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2014
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Semi transparent colour for div element

    Hi everyone,

    I wondered if anyone could tell me the css rule to set the background colour of a div to a semi-transparent colour. It would need to work across as many browsers as possible.

    I'd really appreciate any help.

    Thanks in advance.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For ie9+ you can use rgba to alter the opacity of the background-color.

    e.g.
    Code:
    .test{
    background:#000;/* fallback for older browsers using just a solid colour*/
    background:rgba(0,0,0,0.3);
    }
    The first three numbers are the rgb value (e.g. black = 000) the 4th number is a decimal between 0 - 1 that adjust the opacity from zero to full opacity.

    If you need to support older browsers then the easiest option is just to use a semi transparent png image instead and repeat that on the background. You can't really use the opacity property either as that makes the content transparent also which is not what is usually required (although there are some workarounds but are too much effort to make it work nicely).

    See this article on CSS tricks for more info.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2014
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for this. I had a look at the article also and it was good to know that there is a workaround for ie8. Will it mean that ie7 and earlier won't render the backup colour and if yes, what will happen to the colour of the element in those browser versions?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gwnh View Post
    Thanks so much for this. I had a look at the article also and it was good to know that there is a workaround for ie8. Will it mean that ie7 and earlier won't render the backup colour and if yes, what will happen to the colour of the element in those browser versions?
    All browsers that don't understand rgba (barring bugs mentioned) will get the fallback rule and display the solid color you have set. Browsers that do understand rgba will just use the last rule as that over-rides the previous background rule.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2014
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok great - thanks for explaining


Bookmarks

Posting Permissions

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