CSS RGBA 边框/背景 alpha double
Posted
技术标签:
【中文标题】CSS RGBA 边框/背景 alpha double【英文标题】：CSS RGBA border / background alpha double 【发布时间】：2011-02-07 05:40:07 【问题描述】：我正在开发一个涉及很多透明度的网站，我想我会尝试完全在 RGBA 中构建它，然后为 IE 做后备。我需要一个“facebox”样式的边框效果，其中外边框是圆形的，并且比它周围的框的背景更不透明。
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>
背景似乎在元素边框下方“延伸”，这导致像素值相加。因此，当背景和边框都是半透明时，边框总是比元素的背景更不透明。这与我想要实现的目标完全相反，但根据我看到的示例，它似乎应该是可能的。
我还应该补充一点，我不能在容器内使用其他元素，因为我还将在容器上使用边框半径来获得圆角，如果子元素的角是已分配背景，这实际上意味着带有方形内容的圆形外边框。
抱歉，我无法发布此图片...显然我没有足够的代表来发布图片。
【问题讨论】：
你能在图片上添加一个链接吗……或者你只能发布链接？ stockli 想实现media.24ways.org/2009/01/f7.png。我在 24ways 上尝试了代码示例，它似乎不起作用。 是的，不幸的是我也受限于链接。不过，我可以尝试在此评论中发布一个！这里是：tinypic.com/view.php?pic=200qm90&s=5 【参考方案1】：您可以使用新的background-clip: padding-box; 属性来实现这一点。它计算背景应该从哪里开始在一个盒子里。
更多详情和示例，请查看here
【讨论】：
【参考方案2】：试试这个：
#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;
【讨论】：
有趣！在 Firefox 中看起来很棒（使用 -moz-border-radius 效果更好），但它仍然无法在 Safari 中工作……它在角落里像以前一样翻了一番，尽管边框有点暗。如果你在它上面设置了一个边界半径，那么拐角处的加倍就会消失，但它在内部圆角上有一个奇怪的加倍。不过，谢谢你！比以前更近了！【参考方案3】：在 Firefox 中对此进行测试证实了您所描述的 - 我花了一点时间才意识到这一点的含义！使边框不那么透明对其下方的透明背景没有影响，因为边框（如您所说）是附加的。
在这种情况下，您必须模拟您所追求的效果并使用比 alpha 更多的颜色：
background: rgba(128, 128, 128, 0.7);
border: 10px solid rgba(0, 0, 0, 0.1);
【讨论】：
很高兴听到我没有疯...令人惊讶的是，所有演示似乎都暗示它应该是可能的。 Safari 在带有方形 RGBA 的大边框上也是一个问题，因为角落中的区域也是相加的，因此每个角落的边框中都有一个小方形框。如果您使用边界半径，这就会消失，在这种情况下可以节省我的时间。不过，你是对的，我不得不求助于颜色变化来做到这一点。不幸的是，在这种情况下，我的布局后面有一个渐变，所以很明显它不能正常工作。感谢您的回答！ 有帮助！谢谢?以上是关于CSS RGBA 边框/背景 alpha double的主要内容，如果未能解决你的问题，请参考以下文章