Html CSS RGBA 边框/背景 alpha 双
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2626039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS RGBA border / background alpha double
提问by stockli
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.
我正在一个涉及很多透明度的网站上工作，我想我会尝试完全在 RGBA 中构建它，然后为 IE 做后备。我需要一个“facebox”样式的边框效果，其中外边框是圆形的，并且比它周围的框的背景更不透明。
The last example from http://24ways.org/2009/working-with-rgba-colourseems to suggest that it's possible, but I can't seem to get it to work. When I try the following:
http://24ways.org/2009/working-with-rgba-colour的最后一个例子似乎表明这是可能的，但我似乎无法让它工作。当我尝试以下操作时：
<!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.
我还应该补充一点，我不能在容器内使用另一个元素，因为我还将在容器上使用 border-radius 来获得圆角，如果子元素有背景，webkit 会将它们的角平方分配，这基本上意味着带有方形内容的圆形外边框。
Sorry I can't post an image of this... Apparently I don't have enough rep to post an image.
抱歉，我无法发布此图片...显然我没有足够的代表来发布图片。
回答by linkyndy
回答by James Morris
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.
在 Firefox 中对此进行测试证实了您所描述的内容 - 我花了一些时间才意识到这的含义！使边框不那么透明不会对其下方的透明背景产生影响，因为边框（如您所说）是可加的。
In which case, you'll have to simulate the effect you're after and work with the colours more than the alpha:
在这种情况下，您必须模拟您所追求的效果并使用比 alpha 更多的颜色：
background: rgba(128, 128, 128, 0.7);
border: 10px solid rgba(0, 0, 0, 0.1);
回答by kingjeffrey
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;
}
