Question

我将以下渐变应用于我的div标签，请查看：

.mw {
  height: 500px;
    background: #ffffff; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
    background: -webkit-linear-gradient(#ffffff 0%, #f9f9f9 100%);
    background: -o-linear-gradient(#ffffff 0%, #f9f9f9 100%);
    background: linear-gradient(#ffffff 0%, #f9f9f9 100%);;; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
}

FIDDLE HERE ，现在当我在浏览器中看到div时，我得到的是一个渐变的背景，类似于I.E.它没有很好地过渡。我如何制作一个良好过渡的渐变和为什么我得到这个阶梯式渐变？它有点难以理解为什么我得到这个阶梯式渐变，当我所拥有的是一个2级梯度时，任何人都能解释一下吗？

Answer 1

想象一下，世界上有两种颜色。当你从第一个渐变到另一个渐变时，中间会有一个步骤，因为没有足够的颜色来表示平滑的渐变。

现在，您有一个从#ffffff到#f9f9f9的渐变，即从白色到近乎白色。您看到的现象的可能解释是我在第一段中描述的。没有足够的颜色来表示平滑的渐变，因为两种颜色彼此非常接近（根据可用的颜色数量，可以想象显示器与您的眼睛相比可以表示什么）。因此，您会看到阶梯式渐变。

有些解决方案可能是噪音和抖动，但CSS渐变可能与这些东西不一致，具体取决于浏览器的渲染引擎。

在您的示例中，尝试将后一种颜色更改为更暗的颜色。你去的颜色越深，即你采用两种颜色越远，你就会看到渐变变得越平滑。

看看这个，例如：https://graphicdesign.stackexchange.com/questions/8108/is-it-really-impossible-to-have-gradient-without-banding

<强>增加：

请注意，需要覆盖的区域越大，此问题就越大。如果您尝试使用从A颜色到B颜色的渐变来覆盖非常大的屏幕，您将看到比您在小屏幕上看到的更明显的步骤。您可以通过调整您提供的JSFiddle中的小提琴区域来演示这一点。当你把它变大时，问题就会变得更加明显。

CSS中的渐变给出了阶梯式背景，而不是平滑过渡的背景

1 个答案: