28

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.

alex
  • 479,566
  • 201
  • 878
  • 984
stockli
  • 558
  • 1
  • 4
  • 11
  • Can you add a link to the image... or are you limited with posting links? – alex Apr 12 '10 at 23:20
  • stockli wants to achieve http://media.24ways.org/2009/01/f7.png. I tried the code example on 24ways and it doesn't seem to work. – Haris Apr 12 '10 at 23:28
  • Yes, unfortunately I'm limited with links as well. I can try posting one in this comment, though! Here goes: http://tinypic.com/view.php?pic=200qm90&s=5 – stockli Apr 13 '10 at 20:38

3 Answers3

29

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

linkyndy
  • 17,038
  • 20
  • 114
  • 194
5

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);
James Morris
  • 4,867
  • 3
  • 32
  • 51
  • Glad to hear I'm not crazy... It's just surprising that all of the demos seem to imply that it should be possible. Safari is also a problem on large borders with RGBA that are square, as the areas in the corners are additive as well so each corner has a little square box in the border. This goes away if you use border-radius, which saves me in this case. You're right, though, I'd have to resort to color variations to do it. Unfortunately in this case I have a gradient behind my layout, so it will be very obvious that it's not working quite right. Thanks for your answer! – stockli Apr 13 '10 at 20:41
3

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;
}
kingjeffrey
  • 14,894
  • 6
  • 42
  • 47
  • Interesting! Looks great in Firefox (even better with -moz-border-radius), but it's still not working in Safari... It's doubling like before in the corners, though the border is a bit darker. If you set a border-radius on it the doubling in the corners goes away, but it has a strange doubling on the inside rounded corner. Thanks for this, though! Closer than before! – stockli Nov 01 '10 at 14:41