使用CSS混合模式进行视觉回归测试

上周，我看到Una Kravets在Generate Conf上发表了有关使用CSS过滤器和混合混合模式的令人振奋的演讲。 特别是一个演示引起了我的注意，因为Una向我们展示了如何将两个布局彼此叠加，并使用混合模式发现它们之间的所有差异。

我对这个想法感到非常兴奋，然后开始思考：我们可以只用一行CSS来创建视觉回归测试吗？ 事实证明我们可以。

见笔视觉回归测试与CSS混合-混合-模式由莎拉Drasner（ @sdras ）上CodePen 。

上面的笔显示，布局的文本块仅稍有变化，但是按钮已进行了较大的修改，并且插图中的小三角形已被更改。

当我在推特上发布此想法时， Bennet Feely （诸如Clippy （用于CSS剪切路径生成）和具有背景Blend-ModeCSS Gradients等令人印象深刻的工具的作者）已经创建了类似的东西，但是它使用了background-blend-mode: difference; 代替。

您可以将鼠标悬停在它上面以查看分开的两个图像：

请参阅CodePen上Bennett Feely（ @bennettfeely ）进行的笔图像 比较 。

为了使事情变得更加有趣， Franklin Ta指出了我的这篇文章，对于整个想法可能是零耐心的，它很好地解释了使用CSS创建视觉差异的概念。 这篇文章发表了整整两年，值得一读。

然后，Una迈出了所有这一切，并创建了一个工具，我们可以在浏览器中使用它来轻松创建视觉回归差异，而无需使用许多脚本（称为Diffy） 。 漂亮整齐。

全部带有一行CSS！

翻译自: https://css-tricks.com/visual-regression-testing-css-blend-modes/