CSS3线性渐变+ RGBA，没那么真正的透明

我有一个页面设置，看起来与此类似：CSS3线性渐变+ RGBA，没那么真正的透明

<body> 
    <div id="wrapper"> 
     <!--- ... content ... --> 
    </div> 
</body>

身体有一个背景颜色和平铺图像，增加了一些噪音和粮食的背景。最重要的是#wrapper有一个线性渐变作为从rgba（0,0,0，.3）到rgba（0,0,0,0）的背景，并且渐变扩展到了顶部的24个像素div，它位于页面顶部---添加阴影。

我的问题是，即使渐变的最终颜色的alpha值为零，#wrapper的背景在24像素渐变完成后保留的颜色也不是真正的透明度。这让我无法理解，是#wrapper上的一个不真实的透明背景，在#wrapper停止的地方在body-background上留下了可见的“分割线”。

如何获得渐变以完全透明？我猜想一个零值的alpha值会做到这一点。此外，使用transparent关键字也不能解决它。

更新

我已经添加了图片显示的问题。第一张照片是实际的外观，第二张照片显示了线条的位置，因为它在那里，尽管在第一张照片上很不清楚。

actual look enter image description here

正如你所看到的，渐变不进去真正的透明。不是当指定的颜色为rgba(0,0,0,0)或transparent时。

克里斯 - 巴克霍尔兹

来源

2011-02-11 chrisbuchholz

，你能否告诉我们你的包装的CSS代码？这看起来很明显，但是你给#wrapper添加了一个box-shadow吗？ – Duopixel 2011-02-11 22:09:49

并且上传正在发生的事情的截图也非常方便。还有什么浏览器/设备？ – 2011-02-11 22:58:04

你在WebKit的浏览器（Chrome/Safari），火狐，IE和Opera测试它？因为它们都以不同的方式处理渐变。

我不完全理解，但我相信你应该考虑在线使用CSS渐变生成器，其中大多数使用纯色，只需用新的RGBA（）替换十六进制小数。

这是学习如何出错的最好方法。

其他则如果你已经在包装div上定义了可能是问题的不透明度。

这是我所能做的

来源

2011-02-15 00:02:12 Glacius

-1

我有同样的问题...并意识到这是因为我的图像保存JPG文件作为最好的。你需要一些支持透明度的东西。

来源

2012-02-01 23:53:28 dee

您没有提供CSS代码。这将有助于更好地发现问题。但是可能的问题之一可能是CSS属性的堆叠。

#wrapper { 
    background: rgb(174,188,191); 
    background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); 
}

Sample expected

#wrapper { 
    background: rgb(174,188,191); 
    background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); 
    background: #111; /*Overrides the above properties*/ 
}

你推翻了在具有较高优先级的CSS先用另一背景属性，也许某处，导致您的透明度重写：

Sample overriden

来源

2012-12-14 18:32:47 swan

CSS3线性渐变+ RGBA，没那么真正的透明

回答

相关问题