1

几年前，我看到很多 CSS 代码使用background-image: url(xxx.png)模拟渐变背景过滤器，因为只有（请纠正，如果我在这里错了）IE 专有过滤器会提供 CSS 渐变。

如今 - 请记住当今最常用的浏览器和便携式设备浏览器（智能手机/平板电脑），我应该使用：

  • CSS 渐变，每个引擎有 1 个背景属性

或者

  • background-image: url(xxx.png), 1 个小图片（但仍然是浏览器请求）；

?

我在一些 CSS 渐变生成器（即 collorzilla）中看到的 IE9 问题怎么样？

更新：对不起，我不是很清楚..我的问题不是“如何做到这一点”，而是关于哪种方法更有效、更可接受或更正确。谢谢！

4

3 回答 3

3

这是一个非常敏感的问题。在我工作的公司，我们根据客户和他们网站的观点做了一些研究。结论是：IE8的用户很多。

有几种方法可以让渐变 CSS 在 IE 中工作，我所知道的最好的方法之一是 css3 pie：css3pie

然而，一个图像格式的圆角，一个像素的宽度或高度的重量几乎可以忽略不计，唯一担心的是它会产生更多的请求。

所以我的意见是使用 css3pie ......它可能也适用于智能手机。

抱歉英语不好。

于 2013-09-10T19:14:36.647 回答
1

所以我自己也有同样的问题，希望找到性能方面的最佳解决方案，我得出以下结论：

专业渐变：

  • 图像会占用带宽，因此在第一次获取图像时可能需要更长时间。话虽如此，重要的是要记住浏览器会缓存这些文件，并且对于格式正确的图像，这仍然不再是一个问题。最大的影响可能是在互联网接收存在问题的偏远地区首次登录的临时用户。
  • 渐变元素更灵活。图像可能依赖于硬编码尺寸才能在它们定义的元素中正确显示，而渐变可以更好地适应环境。
  • 本着灵活性的精神，您还可以考虑不仅可以修改尺寸，还可以在通过 javascript 动态设置背景时对背景本身进行更多控制。

专业形象：

  • 渐变对浏览器来说更难显示。您不是显示已经制作的图像，而是要求浏览器自己构建图像。在较旧或功能较弱的设备上，这可能是一个问题，因为它们可能无法像您希望的那样快速或运行良好。
  • 图像可以允许更复杂的图案，（例如：您想要三角形周围的渐变）。根据您的目标，渐变可能能够做到这一点，但 CSS 可能会很快变得复杂。

这些是我能想到的因素，希望我没有遗漏任何大的东西。至于我走的方向，我倾向于最终使用渐变，以实现上述灵活性。带宽也有点令人担忧，因为我经常在这些偏远地区有用户接收不佳。

于 2018-04-03T17:24:20.493 回答
0

你可以做 HTML5 Boilerplate 做的事情：

<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie10 lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]>   <html class="lt-ie10 lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]>   <html class="lt-ie10 lt-ie9"><![endif]-->
<!--[if IE 9 ]>  <html class="lt-ie10"><![endif]-->
<!--[if gt IE 9]><!--> <html class=""><!--<![endif]-->

现在你有一个<html>用于 IE 的类：

IE6 --> lt-ie10, lt-ie9, lt-ie8, lt-ie7
IE7 --> lt-ie10, lt-ie9, lt-ie8,
IE8 --> lt-ie10, lt-ie9
IE9 --> lt-ie10

在你的 CSS 中：

.element { background-image: /*Your CSS3 gradient declaration */; }
.lt-ie10 { background-image: url(/*Your PNG file*/); }
于 2013-09-10T22:01:28.840 回答