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

【问题标题】：CSS linear-gradient displaying wrong colorCSS线性渐变显示错误的颜色
【发布时间】：2017-02-08 15:39:46
【问题描述】：

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

HTML：

<div></div>

CSS：

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

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

您可能需要放大浏览器才能看到 1px 叠加蒙版清晰。

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

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

【问题讨论】：

也许它与操作系统、系统配置等有关，我不知道，但即使在 200% 缩放时，我也看不到您在屏幕截图中突出显示的内容。我在 Win7 PC 上使用 Chrome。
Chrome 和其他浏览器插入默认样式。也许这会导致差距。像哈利一样，我也看不出你到底是什么意思。使用检查器查看发生了什么。
在 div css 之前添加body {margin:0}。
我在你的截图中也看不到问题。听起来像色差。你戴眼镜吗？您是否尝试过以高倍率（不平滑）查看屏幕截图？
错字：色标应该在 0、50px、50px（不是 0）和 100px，不是吗？我也无法重现该问题（0 像素和 50 像素都没有）

标签： html css linear-gradients

【解决方案1】：

body {margin:0}“有效”，因为它消除了左侧的白光像素。让我潜得更深 -

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

在插图中更容易看到 -

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

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

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

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

&lt;div&gt;&lt;/div&gt;

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

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

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

【讨论】：

简直太棒了。非常感谢您的贡献。
太棒了！非常感谢！

【解决方案2】：

您的屏幕截图没有任何 1 像素的叠加蒙版。这是您自己照片的放大版：

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

【讨论】：

【解决方案3】：

为导航器添加前缀

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);
}

【讨论】：