为什么不在网络中使用Gradient div？

Question

渐变图像的使用在开发人员中非常常见，用于样式化页面。从导航栏的样式到背景样式，许多地方都使用了渐变图像。在任一方向上重复小图像的技术也很常见。

另一种风格和效果的方法是使用不同颜色的多个div在另一个下方使用，后者比前者轻一点。在最简单的情况下，这样做只包括一个小脚本。所以，编写大量标记没问题，只需要一些简单的代码。

唯一值得关注的是速度和性能。

速度

脚本，更确切地说，该功能的尺寸要比图像短得多。所以，在速度方面，后一种方法似乎更好。

性能

今天的浏览器非常强大，因此显示图像和执行功能之间的区别可以忽略不计。

Css管理

显然，定位等问题会成为另一个问题，但我们确实在日常生活中遇到这些问题。问题不过是重叠两个div并设置它们的z-index。整个渐变div可以位于一个父div之内。

因此，解决性能和速度问题并不是使用Gradient div比使用图像更好的方法吗？

Answer 1

这是另一种方法，是的。但不是一个好人。你获得零点：

• 可维护性
• 可扩展性
• SEO
• 从内容中分离演示文稿

此外，我们不必担心性能，因为今天的浏览器功能更强大是一个重要的假设。

Answer 2

实际上，我认为您描述的第二个选项（创建具有较少颜色的多个div）非常糟糕。

1. 为了造型，你正在改变标记。那是不行的。
2. 用户禁用JavaScript是很常见的事情。那么会发生什么？
3. 正如你自己所说，定位混乱。
4. 说到性能，我会更加谨慎，而不是说它不再是问题。特别是考虑到移动浏览器的曙光。
5. 这种造型难以理解和维护。特别是当你的团队有一天改变时。

此外，还有另外两种方法可以实现渐变。

1. CSS渐变 - 仅限于简单的变体，需要大量的CSS才能提供良好的跨浏览器功能。您可以尝试使用此生成器来体验这些：http://www.colorzilla.com/gradient-editor/
2. SVG背景。这些允许您创建任何您想要的渐变。您可以像使用任何其他图像一样在CSS中使用svg文件。但是，某些浏览器不支持此功能。这是一张显示when it's an option
的表格

使用图像是最可靠的选择，而将SVG与普通图像（对于不支持SVG的浏览器）结合起来似乎是最灵活的方法。