CSS渐变vs背景图像？

问题描述 投票：1回答：3

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

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

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

要么

  • background-image：url（xxx.png），1个小图片（但仍然是浏览器请求）;

?

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

更新：抱歉，我不是很清楚..我的问题不是“如何做到”，而是更高效，可接受或正确的方式。谢谢！

html css css3
3个回答
3
投票

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

有几种方法可以使渐变css工作，即我所知道的最好的一种方法是css3 pie：css3pie

但是，像素宽度或高度的图像格式圆角的重量几乎是微不足道的，唯一的问题是它会更多地生成请购单。

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

抱歉英文不好。

1
投票

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

Pro Gradient：

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

专业形象：

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

这些是我能想到的因素，希望我没有留下任何重大的东西。至于我走的方向，我倾向于最终使用渐变，以获得前面提到的灵活性。带宽也有点令人担忧，因为我经常在这些偏远地区接待用户。

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]-->

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

IE6 - > lt-ie10，lt-ie9，lt-ie8，lt-ie7 IE7 - > lt-ie10，en-ie9，en-us8， IE8 - > lt-ie10，lt-ie9 IE9 - > lt-ie10

在你的CSS中：

.element { background-image: /*Your CSS3 gradient declaration */; }
.lt-ie10 { background-image: url(/*Your PNG file*/); }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.