CSS3线性渐变+rgba，透明度并非真正的透明

Question

CSS3线性渐变+rgba，透明度并非真正的透明

4

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

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

元素有一个背景颜色和平铺图像，为背景添加了一些噪点和颗粒。在此基础上，#wrapper 元素的背景是一个线性渐变，从 rgba(0,0,0,.3) 渐变到 rgba(0,0,0,0)，并且该渐变在 div 的顶部（页面顶部）向外扩展了24个像素，以添加阴影。

我的问题是，即使渐变的结束颜色具有零的 alpha 值，#wrapper 背景在 24 像素渐变完成后所持有的颜色也不是真正的透明度。这让我在 #wrapper 上留下了一个不真正透明的背景，在那里它停止时在 body 背景上留下了一个可见的“分割线”。

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

更新

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

actual look enter image description here

正如您所看到的，渐变并没有真正地变为透明。无论将 to-color 指定为 rgba(0,0,0,0) 还是 transparent。

-- Chris Buchholz

- chrisbuchholz

你能展示一下wrapper的CSS代码吗？这可能很明显，但是你在#wrapper中添加了box-shadow吗？ - methodofaction

并且上传发生的屏幕截图也非常方便。同时，请告知使用的浏览器/设备是什么？ - Michael Mullany

1

如果您提供渐变的CSS代码、发生的渲染以及所需发生的模型，将会很有帮助。 - Lea Verou

1

为什么不直接添加一个盒子阴影呢？这似乎是你真正想要的东西。 - oif_vet

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Glacius · Answer 1

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

我不完全理解，但我认为你应该考虑使用在线CSS渐变生成器，它们大多使用纯色，只需用新的RGBA()替换十六进制即可。

那是学习如何出错的最佳方式。

除此之外，如果你已经在包装div上定义了不透明度，那可能就是问题所在。

这是我能做到的最好的。

- swan · 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%);
}

预期样本

#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中，导致透明度被覆盖：

已覆盖示例

- dee · Answer 3

我也遇到了同样的问题…后来发现是因为我将图像保存为JPG格式。你需要使用支持透明度的格式。