CSS RGBA border / background alpha double

StackOverflow https://stackoverflow.com/questions/2626039

  •  26-09-2019
  •  | 
  •  

Question

I'm working on a website that has a lot of transparency involved, and I thought I would try to build it entirely in RGBA and then do fallbacks for IE. I need a "facebox" style border effect, where the outer border is rounded and is less opaque than the background of the box it surrounds.

The last example from http://24ways.org/2009/working-with-rgba-colour seems to suggest that it's possible, but I can't seem to get it to work. When I try the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>RGBA Test</title>
 <style type='text/css'>
   body {
     background: #000;
     color: #fff;
   }
   #container {
     width: 700px;
     margin: 0 auto;
     background: rgba(255, 255, 255, 0.2);
     border: 10px solid rgba(255, 255, 255, 0.1);
     padding: 20px;
   }
  </style>
</head>
<body>
  <div id='container'>
    This should look like a facebox.
  </div>
</body></html>

It seems like the background "extends" underneath the border of the element, which causes the pixel values to get added together. Thus, when both the background and the border are semi-transparent, the border will ALWAYS be more opaque than the background of the element. This is exactly the opposite of what I am trying to achieve, but it seems like it should be possible based on the examples I've seen.

I should also add that I can't use another element inside the container, because I'm also going to use a border-radius on the container to get rounded corners, and webkit squares the corners of the child elements if they have a background assigned, which would essentially mean a rounded outer border with square contents.

Sorry I can't post an image of this... Apparently I don't have enough rep to post an image.

Was it helpful?

Solution

You can use the new background-clip: padding-box; property to get this going. It calculates where from should the background start within a box. For more details and examples, check here

OTHER TIPS

Testing this in Firefox confirms what you describe - and it took me a little while to realize the implications of this! Having the border less transparent will have no effect on the transparent background beneath it, because the border is (as you say) additive.

In which case, you'll have to simulate the effect you're after and work with the colours more than the alpha:

background: rgba(128, 128, 128, 0.7);
border: 10px solid rgba(0, 0, 0, 0.1);

Try this:

#container {
    width: 700px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    border: 10px solid rgba(255, 255, 255, 0.1);
    padding: 20px;

    /* and here is the fix */
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top