CSS 线性渐变显示错误的颜色

Question

我正在尝试使用线性渐变和背景大小创建一个简单的水平条纹背景，第一种颜色显示正确，但第二种颜色 #58a 显示左侧 1px 覆盖遮罩

HTML:

<div></div>

CSS:

div {
    height: 100px;
    background: linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
}

查看此link中的结果：https://codepen.io/migcoder/pen/BpOGdL

您可能需要放大浏览器才能清楚地看到1px 覆盖遮罩。

奇怪的是，如果我将第二种颜色更改为蓝色或红色（可能更多其他颜色），问题就消失了。

我在 Chrome、Firefox 和 Edge 中测试过，它们都有同样的问题，这是一个错误吗？

Answer 1

为导航器添加前缀

div {
  height: 100px;
  background: -webkit-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: -o-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: -moz-linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
  background: linear-gradient(#fb3 0, #fb3 50px, #58a 0px, #58a 100px);
}

Answer 2

您的 screen-shot 没有任何 1px 覆盖遮罩。这是您自己的照片的放大版本：

我很确定这只是一种错觉。

Answer 3

body {margin:0} "works" 因为它删除了左边的白点像素。让我深入研究 -

显示器中的每个像素都是使用垂直的红色、绿色、蓝色 LED 段构建的。红色 + 绿色使黄色变为黄色，但仅填充像素的第一部分，而蓝色仅填充最后一部分。

有图更容易看出来-

这表示物理屏幕上的单个像素。质量和物理分离取决于单元的质量以及屏幕的物理尺寸和分辨率。质量越低 and/or 分辨率越低，细胞就会显得越大 - 眼镜等光学影响也会影响通过色差和一般失真等因素感知细胞的方式。

它旁边的白色发光单元可以通过增加对比度来放大效果。移除边距使彩色区域靠近深色会降低效果。所以基本上，由于像素单元的构建方式，它是一种光学现象（我想你可以称之为幻觉，但是，屏幕上存在实际的物理分离）。

您可以通过仅使用红色和蓝色来进一步放大效果（结果当然取决于显示器等。正在观看）：

div {
  height: 100px;
  background: linear-gradient(#f00 0, #f00 50px, #00f 0px, #00f 100px);
}

<div></div>

如果我们现在仔细查看显示上述代码结果的实际 物理屏幕：

我们可以更清楚地看到分离（图像不是最好的，但希望足以说明；两行红色，两行蓝色）：

左边的像素当然代表白色，并且由于对比会使旁边未点亮的部分（在本例中为蓝色部分）更加明显，从而增加效果。

CSS 线性渐变显示错误的颜色

CSS linear-gradient displaying wrong color

html

css

linear-gradients