Question

我的页面设置与此类似：

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

正文具有背景颜色和平铺图像，可为背景添加一些噪点和纹理。最重要的是，＃wrapper有一个线性渐变作为背景，从rgba（0,0,0，.3）到rgba（0,0,0,0），渐变在顶部扩展超过24像素div，位于页面顶部---添加阴影。

我的问题是，完成24像素渐变后#wrapper背景所保持的颜色不是真正的透明度，即使渐变的结束颜色的alpha值为零。这让我感到失望的是#wrapper上一个不真实的透明背景，它在#wrapper停止的地方的身体背景上留下了一条可见的“分界线”。

如何让渐变进入完全透明度？我猜一个alpha值为零就可以做到这一点。此外，使用transparent关键字也无法解决此问题。

更新

我添加了图片来显示问题。第一张照片是实际的外观，第二张照片显示了该线的位置，因为它在那里，但第一张照片上的情况非常不清楚。

actual look enter image description here

如您所见，渐变不会进入真正的透明度。不是将to-color指定为rgba(0,0,0,0)或transparent。

- Chris Buchholz

Answer 1

您是在webkit浏览器（chrome / safari），firefox，IE还是Opera中进行测试？因为他们都以不同的方式对待渐变。

虽然我认为你应该考虑在线使用CSS渐变生成器，但我们大多数都使用纯色，只需用新的RGBA（）替换十六进制十进制。

这是了解你出错的最好方法。

除此之外，如果您已经在包装器div上定义了可能是问题的不透明度。

这是我能做的最好的事情

Answer 2

您没有提供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

Answer 3

我遇到了同样的问题...并且意识到这是因为我将图像保存为JPG。你需要一些支持透明度的东西。

CSS3线性渐变+ rgba，不是那么真实的透明度

3 个答案: