为什么两个完全相邻的矩形在它们之间重叠或不完全相邻地创建黑线或白线？

我有一个扁平的设计（好吧，应该是这样），但是形状之间的这些黑白线实在令人讨厌... [无描边]看一下：

看到两个重叠的矩形之间的这些线吗？我该如何解决？（我是用Photoshop创建的，但是使用Paint.net和Adobe Illustrator还是有同样的问题）颜色有问题吗？还是我看得太多？：P

正如ElmoAllén正确指出的那样，这既不是错觉，也不是图形编辑器中的错误，而是由您使用的显示器技术引起的效果。

具体地说，在典型的现代TFT-LCD计算机屏幕上，每个像素实际上由并排排列的三个单独的子像素组成，分别为reg，绿色和蓝色：

这些子像素中的每一个只能产生一种光的原色，但是由于它们非常靠近，因此当您查看它们时它们的颜色会融合在一起，从而产生纯色的错觉。

对于白色（或灰色）像素，所有子像素均被照亮。通过相对于彼此调整不同子像素的强度，可以产生不同的颜色。在极端情况下，对于纯红色，绿色或蓝色像素，只有产生该颜色的子像素才打开。因此，在子像素级别上，您的红绿红条纹将呈现如下所示：

在这里，您可以开始观察发生了什么：通常每个亮的像素之间有两个暗子像素之间的间隙，但是在颜色之间的边界处，该间隙要么是三个子像素（创建一个暗带），要么就是一个（创建一个暗带）。轻）。

当然，当附近的子像素的颜色混合在一起时，效果会更加明显，就像通常在您看屏幕时看到的那样：

在这里，我仅应用了适度的模糊度，模拟了例如通过放大镜看屏幕时可能看到的内容。（尝试一下！）在这里左边界处的暗带很明显。右边界处的亮带显示不清晰，但是如果图像进一步模糊，它将变得更加明显。

当然，您不必信任这些模拟图像。相反，让我附上我在笔记本电脑屏幕上拍摄的几张特写照片，并用一台便宜的数码相机显示问题中的图像：

与模拟图像一样，暗线非常明显。亮线不太好，可能是因为在亮的像素之间仍然有一个暗的子像素，所以没有如此清晰的单个强度峰值。

您可以采取什么措施解决此问题？

原则上，这种效果是监视器可以自动补偿的，例如，通过检测这种有问题的过渡并让颜色略微渗入彼此以柔和过渡。但是，这将增加更多的复杂性和成本，这就是为什么大多数显示器制造商都不会打扰的原因。

但是，您可以通过在这种高对比度色域之间添加中间颜色的窄条（例如，黄色，红色和绿色）来实现相同的结果。考虑到显示灰度系数，此条纹的颜色应大致与周围颜色的平均亮度匹配。

很难准确显示每个人在这里看到的内容，因为每个人都有自己的显示屏来查看图像。在我的显示器上，如果斜视，我可以看到在左红色矩形和绿色中间矩形之间的黑色细线。相反，在右边的红色和中间之间，我看到了一条非常细的白线。基本上，我了解原始海报意味着他们看到了以下内容（夸张）：

这些不是问题提示中建议的马赫乐队。马赫带并非生于不同颜色的颜色之间，而是生于不同颜色的颜色之间（例如，两个灰色阴影之间）。在我的显示器（以及所有sRGB显示器）上，在红色矩形的右侧创建了一个非常微弱的马赫带，因为全红色（RGB 255-0-0）的亮度略小于全绿色（RGB 0-255-0）的亮度。好）。（即使原始图像的颜色不是纯正的红色或绿色，其感知亮度的差异也大致相同。）基本上，马赫带显示如下（再次被高度放大）：

但是马赫带不能产生白色或黑色的细线。它们仅在大范围内在观察到的亮度上产生细微差异。马赫带总是对称的：红色到绿色与绿色到红色相同。但这是不对称的：其他边界是黑色，其他边界是白色。

相反，我们在这里看到的视觉伪像是由于LCD子像素排列。最常见的排列是从左到右的红-绿-蓝。因此，在每个全红像素之间都有一个关闭的绿色子像素和一个关闭的蓝色子像素。相反，在一个完整的红色像素和一个完整的绿色像素之间，有三个关闭的子像素：绿色，蓝色和红色。这会在红色和绿色之间产生黑色细线效果。如下图所示：

现在，在绿色矩形的另一侧，首先是点亮的绿色子像素，然后关闭蓝色的子像素，然后是红色的子像素。现在，在点亮的绿色和红色子像素之间只有一个黑色子像素。这会在绿色和红色边界之间产生非常细的亮线效果。如下所示：

要查看监视器上的亚像素，您可能需要一个放大镜。诺曼（Norman）的人眼视力无法集中在如此近的距离上，您将无法看到单独的像素。但是，发现轻微的亮度差异非常好。

现在，为了证明该理论正确，您可以在左红色矩形和绿色矩形之间添加例如1 px宽的RGB 128-255-0线，并查看黑线是否淡出，因为这会在之前添加一些绿色子像素光差距。您也可以尝试在绿色矩形和右红色矩形之间使用1像素宽的RGB 85-85-0，以使子像素稍微变暗。不幸的是，这不能在实际设计中使用，因为首先它取决于红-绿-蓝子像素的排列，同时使颜色边界有些模糊。

此外，有可能发生屏幕锐化算法。基本上，监视器锐化使所有颜色边缘更加突出，在边缘的较亮一侧增加白色，而在较暗的一侧逐渐变暗为黑色。这很像马赫带效应，但更窄，通常更突出。可以通过调整显示器的锐度设置（希望如此）并查看效果是否降低来查明。

这是颜色组合在一起时的本质。人眼倾向于简化以澄清事物以及由我们对颜色的感知引起的光学错觉。

这种被称为“马赫带幻觉”的现象会以两种不同的颜色出现。既不饱和也不饱和。我的附图显示相同的错觉出现在灰色中。与中间的较深的灰色相比，较浅的灰色将更浅，并且中间的灰色在右侧的深灰色边缘旁边显得更浅。等等。

如果对您很重要，那么您有两种选择。

1. 选择具有相同黑比率的两种颜色，这将确保减少幻觉
2. 您可以通过在两种颜色之间添加一条灰色细线来“愚弄人”，这些细线具有两种颜色的平均灰度。看到下面的结果。您可能会认识到，在幻觉上，顶部的条带比底部的条带少。

我不确定，但是如果您戴着眼镜，那就是问题所在。您很可能会看到色差，其中红色和绿色分开。

眼镜越厚，效果越明显。试着转动头，看色块移动-当您朝着眼镜的边缘移动时，眼镜会变厚，从而引起更大的分离。

Adobe论坛上的该线程对 “对齐像素网格”选项的位置有很多了解。

如果我没记错的话，也可以通过File > New对话框（在该框的最底部）在整个文档范围内启用此功能。

这些硬性监视器专家是正确的，或者您只是由于矢量未正确对准监视器上的像素而产生了差异。这就是为什么这么多的人对添加到Illustrator中的这个小复选框感到兴奋的原因。

这可能是由于颜色相互作用。红色和绿色是互补色，当并排放置时，似乎会形成黑色/深色线，看起来像是重叠的。您可以在此处阅读并查看更多示例。

Illustrator会自动将形状对齐到适当的位置，因此在此处不应出现任何重叠的问题。

如果在“ 转换”窗口的选项菜单中启用了“ 将新对象与像素网格对齐”选项（在任何选项窗口的右上角都有一个选项），则默认情况下，您绘制的任何新对象都将设置“像素对齐”属性。对于使用Web文档配置文件创建的新文档，默认情况下启用此选项。对于现有的对象，你可以通过选择关闭像素网格对齐对齐到像素网格在变换窗口本身（打勾后显示更多选项窗口中的选项菜单）。

像素对齐的笔触的清晰外观在光栅输出中仅以72ppi的分辨率保持。对于其他分辨率，此类笔划产生抗锯齿结果的可能性很高。

像素对齐的对象，但没有任何垂直的垂直或水平线段，不进行修改以与像素网格对齐。例如，由于旋转的矩形不具有直的垂直或水平线段，因此当为其设置像素对齐属性时，不会轻推它以生成清晰的路径。

该Adobe文档对此进行了更广泛的说明：http : //helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html