html - 我可以根据浏览器类型使用不同的 CSS 背景图片吗？

Question

我有一个基本的网站设计，我为 Logo 创建了一个简单的 SVG 图像。此图像非常基本，仅包含一些文本、多段线和使用 feOffset 的投影效果，如此问题的答案中所述 SVG drop shadow using css3 .

在 Chrome 和 IE10 中查看图像时看起来不错，但在 Firefox 中查看时像素化非常粗糙。我基本上想知道是否可以添加依赖于浏览器类型的背景图像，以便我可以为每个浏览器创建可接受的图像。即

if (browser == X)
{ 
   use image Y
}
else
{
   use image Z
}

但仅使用 CSS 和/或 HTML(我不了解 javascript 或 jQuery)。

考虑到我的图像是多么的基础，我不敢相信我是唯一遇到这个问题的人，所以我想知道网页设计师是如何解决这个问题的，因为我能想到的唯一解决方案是创建一个光栅图像SVG，但这是我真正想尽可能避免的事情。

Answer 1

是的，你可以，但它很老套。您必须以特定浏览器只能读取的方式创建和定位元素。

从css-tricks.com复制和修改

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { 
background-image: url(blabla.jpg) }

/* IE7 */
*:first-child+html #dos { background-image: url(blabla.jpg) } 

/* IE7, FF, Saf, Opera  */
html>body #tres { background-image: url(blabla.jpg) }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { background-image: url(blabla.jpg) }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { background-image: url(blabla.jpg) }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { background-image: url(blabla.jpg) }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { background-image: url(blabla.jpg) }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  background-image: url(blabla.jpg) }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background-image: url(blabla.jpg)  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { background-image: url(blabla.jpg)  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { background-image: url(blabla.jpg)  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { background-image: url(blabla.jpg)  }

/* Everything but IE6-8 */
:root *> #quince { background-image: url(blabla.jpg)  }

/* IE7 */
*+html #dieciocho {  background-image: url(blabla.jpg) }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { background-image: url(blabla.jpg) }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { background-image: url(blabla.jpg)  }

您是否完全不愿意通过 jQuery 执行此操作？那样会容易得多。