4

我有一个类似于此的页面设置：

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

主体具有背景颜色和平铺图像，为背景添加了一些噪点和颗粒。最重要的是，#wrapper 有一个线性渐变作为背景，从 rgba(0,0,0,.3) 到 rgba(0,0,0,0)，渐变在顶部扩展超过 24 个像素div，位于页面顶部---添加阴影。

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

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

更新

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

实际外观 在此处输入图像描述

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

——克里斯·布赫霍尔兹

4

3 回答 3

0

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

虽然我不完全理解，但我相信您应该考虑在线使用 CSS 渐变生成器，其中大多数使用纯色，只需将十六进制十进制替换为新的 RGBA()。

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

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

这是我能做的最好的

于 2011-02-15T00:02:12.760 回答
0

您没有提供 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%);
}

预期样品 

#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 中具有更高优先级的某个地方，导致你的透明度被覆盖：

样本覆盖

于 2012-12-14T18:32:47.877 回答
-1

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

于 2012-02-01T23:53:28.740 回答