Html CSS RGBA边框/背景alpha双色_Html_Css_Rgba

Html CSS RGBA边框/背景alpha双色

html css

Html CSS RGBA边框/背景alpha双色,html,css,rgba,Html,Css,Rgba,我在一个涉及很多透明度的网站上工作，我想我会尝试完全用RGBA构建它，然后为IE做回退。我需要一个“facebox”风格的边框效果，外部边框是圆形的，并且比它周围的框背景不透明上一个例子似乎表明这是可能的，但我似乎无法让它发挥作用。当我尝试以下方法时： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

我在一个涉及很多透明度的网站上工作，我想我会尝试完全用RGBA构建它，然后为IE做回退。我需要一个“facebox”风格的边框效果，外部边框是圆形的，并且比它周围的框背景不透明

上一个例子似乎表明这是可能的，但我似乎无法让它发挥作用。当我尝试以下方法时：

<!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>


RGBA试验
身体{
背景：#000；
颜色：#fff；
}
#容器{
宽度：700px；
保证金：0自动；
背景：rgba（255，255，255，0.2）；
边框：10px实心rgba（255,255,255,0.1）；
填充：20px；
}
这应该看起来像一个脸谱盒。

似乎背景“延伸”到元素的边界下，这导致像素值相加。因此，当背景和边框都是半透明时，边框将始终比元素的背景不透明。这与我试图实现的目标恰恰相反，但从我所看到的例子来看，这似乎是可能的

我还应该补充一点，我不能在容器内使用另一个元素，因为我还将使用容器上的边界半径来获得圆角，如果子元素指定了背景，webkit将使其角方正，这基本上意味着具有方形内容的圆形外边界

很抱歉，我无法发布此的图像。。。显然，我没有足够的代表来发布图片。

在Firefox中测试这一点证实了您的描述——我花了一点时间才意识到这一点的含义！使边框不那么透明将不会对其下方的透明背景产生影响，因为边框（如您所说）是相加的

在这种情况下，您必须模拟所追求的效果，并使用比alpha更多的颜色：

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

试试这个：

#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;
}

您可以使用新的

背景剪辑：填充框属性以启动此操作。它计算背景在框中的起始位置。
有关更多详细信息和示例，请检查
是否可以添加图像的链接。。。还是说你在发布链接方面受到限制？stockli希望实现这一目标。我在24ways上尝试了这个代码示例，但它似乎不起作用。是的，不幸的是，我也受到链接的限制。不过，我可以试着在这篇评论中发表一篇！下面是：很高兴听到我没有疯。。。令人惊讶的是，所有的演示似乎都暗示这是可能的。Safari在RGBA为正方形的大边框上也是一个问题，因为角落中的区域也是相加的，所以每个角落的边框中都有一个小方形框。如果你使用边界半径，这就消失了，在这种情况下，这节省了我的时间。你说得对，不过，我得借助颜色变化来做到这一点。不幸的是，在这种情况下，我的布局后面有一个渐变，所以很明显它不太正常。谢谢你的回答！有趣！在Firefox中看起来很棒（使用-moz border radius甚至更好），但在Safari中仍然不起作用。。。在角落里它像以前一样加倍了，尽管边界有点暗。如果在其上设置边界半径，则角的加倍会消失，但在内部圆角上有一个奇怪的加倍。不过，谢谢你！比以前更近了！