![](/img/trans.png)
[英]Loading different sized background images based on browser width using CSS?
[英]Can I use different CSS background images based on browser type?
我有一個基本的網站設計,並且為徽標創建了一個簡單的SVG圖像。 該圖像非常基礎,僅使用feOffset包含一些文本,一條折線和一個陰影效果,如對此問題的答案( 使用css3的SVG陰影)所述 。
在Chrome和IE10中查看時,圖像看起來不錯,但是在Firefox中查看時,像素看起來非常粗糙。 我基本上想知道是否可以添加依賴於瀏覽器類型的背景圖像,以便為每個瀏覽器創建一個可接受的圖像。 即
if (browser == X)
{
use image Y
}
else
{
use image Z
}
但僅使用CSS和/或HTML(我不了解javascript或jQuery)。
考慮到我的圖像的基本知識,我不敢相信我是唯一遇到此問題的人,所以我想知道網頁設計師如何解決此問題,因為我能想到的唯一解決方案是創建柵格圖像而不是SVG。但這是我真的想避免的東西。
是的,您可以,但是它很hacky。 您必須以只能由特定瀏覽器讀取的方式創建和定位元素。
從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做到這一點嗎? 這樣會容易得多。
window.navigator對象包含有關訪問者瀏覽器的信息,使用navigator對象可以使用javaScript設置css。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.