-1

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

另一种设置样式和提供这种效果的方法是在另一个下面使用多个具有不同颜色的 div，后者比前者轻一点。在最简单的情况下，这样做只会包含一个小脚本。所以，写很多标记没有问题，只是一些简单的代码。

剩下的唯一问题是速度和性能。

速度

脚本，更准确地说，函数的大小比图像要短得多。因此，就速度而言，后一种方法似乎更好。

表现

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

CSS管理

显然，定位等问题将是另一个问题，但我们确实在日常生活中与这些问题作斗争。问题不在于重叠两个 div 并设置它们的 z-index。整个渐变 div 可以位于一个父 div 内。

那么，在解决了性能和速度问题之后，使用 Gradient div 是不是比使用图像更好？

4

2 回答 2

2

这是另一种方法，是的。但不是一个好的。你得到零分：

  • 可维护性
  • 可扩展性
  • 搜索引擎优化
  • 呈现与内容的分离

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

于 2012-06-23T13:18:32.743 回答
1

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

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

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

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

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

于 2012-06-23T12:36:00.580 回答