可以使SVG图像作为backgrounds-即使在Internet Explorer中显示?

我使用SVG图像作为背景图片。 我的CSS是这样的:

background:url('image.svg');

问题是,他们没有出现在IE8或更早版本。

有没有什么办法,使这项工作? 或者仅指定IE后备? (我不想用GIF格式为其他浏览器来代替它们。)

活生生的例子:HERE

--------------解决方案-------------

有没有办法,我知道,使IE8使用SVG作为背景图像。 你有两个真正的选择,如果IE8的支持是对你很重要:

  1. 为IE8和其他浏览器PNG回退不支持SVG在后台
  2. 放置SVG在你的页面,而不是背景,其定位一切与CSS的身后,然后使用类似SVG网页在IE8提供支持

我有同样的问题,并使用该溶液。 对于这个工作,你需要有一个SVG和 可以使SVG图像作为backgrounds-即使在Internet Explorer中显示?

图像的副本。 不是这样写的CSS:

.twitter-logo {
width: 200px;
height: 200px;
background: url(http://cl.ly/D4xT/twitter_newbird_blue.png) no-repeat center center;
background: rgba(0,0,0,0) url(http://cl.ly/D4o5/twitter_newbird_blue.svg) no-repeat center center;
}

诀窍是,IE8不支持RGBA,正因为如此IE8忽略第二个背景定义。

根据在其他浏览器支持SVG,你仍然Android浏览器2.3- Firefox 3.6 的问题,因为他们支持RGBA,不支持SVG。

下面是的jsfiddle的例子也是如此。

分类:CSS 时间:2012-01-04 人气:241
分享到:

相关文章

  • CSS样式滚动条跨浏览器 2012-09-15

    我该如何定义CSS样式滚动条跨浏览器? 我测试此代码,它只能在IE和Opera,但在Chrome,Safari和Firefox失败. <style type="text/css"> <!-- body{scrollbar-face-color: #000000; scrollbar-shadow-color: #2D2C4D; scrollbar-highlight-color:#7D7E94; scrollbar-3dlight-color: #7D7E94; sc

  • CSS调试,跨浏览器的兼容性 2013-02-13

    有两个<div></div>标签. 当它被使用Firefox浏览,效果是理想的. 之间有一间隙.steven和.john 然而,当它用IE浏览,效果不理想的; .Steven和.john被连接在一起(没有间隙). 如何解决这个问题呢? .steven{ position: relative; width: 620px; left: 55px; float: left; } .john { position: relative; width: 270px; right: 35px;

  • CSS的z-index跨浏览器问题的绝对定位的DIV中的链接 2013-02-15

    请参阅http://jsfiddle.net/mithun/nuF2Q/1/ 我以前做的HTML结构 <div id='slider'> <ul> <li> <a class='pride' href="i1.html"> Item 1 </a> <div class='info'> <a class='roar' href="i1.html"> Description 2 <

  • 最好的CSS按钮是跨浏览器的,适度地降低,以及输入或链接工作 2014-01-29

    我已经看到了很多好的尝试CSS按钮(例如http://ubuwaits.github.com/css3-buttons/) 但我还没有见过一个出现的还以为是安全生产中的使用,并满足下列要求: 看起来不错的所有现代浏览器 缓慢下降对旧的浏览器到至少IE7(奖金,如果IE6) - 不在乎,如果他们看起来一样好,只要他们没有明显差 同样适用于输入标签(提交按钮)或链接(标签) 什么是最好的人都在生产中使用? --------------解决方案------------- 更妙的是使用CSS精灵. 这涉

  • jQuery插件跨浏览器的CSS兼容性 2014-06-05

    在我的应用程序的用户将能够改变元素的边框样式属性,如半径,颜色,宽度,样式等. 现在,我还需要能够获得这些属性与jQuery,但为了得到这样的边界半径,你需要使用css("border-top-left-radius")至少在Firefox和新版本镀铬),这不会在所有的浏览器,所以我的问题是: 是否有增加正确的前缀的CSS选择器的WebKit就像一个插件,MOZ等,并设置这些属性时,也可能使这些CSS功能的跨浏览器兼容吗? 非常感谢. --------------解决方案-------

  • 跨浏览器圆角(无图) 2012-02-08

    当转换PSD的成HTML,甚至HTML5和CSS,如何更困难的是它圆边角,使那些弯道在所有浏览器保持一致,特别是Internet Explorer的? 假设角落,用代码,而不是图像四舍五入. --------------解决方案------------- 您可以检查出角球,如果你想有一个JavaScript解决方案. 它是跨平台的. 有跨浏览器几个变通圆角不使用Javascript: CSS圆角在所有浏览器 在圆角的实验研究 在CSS圆角(跨浏览器实现) 使用CSS3的WebKit的壁虎和基于浏

  • 自定义字体嵌入不工作跨浏览器 2015-02-02

    我有"Gulim",自定义字体,嵌入到我的网站mangodownload.com(你可以看到它的网页上,如果你看到宋体,它不会在你的浏览器.) 不幸的是,这种字体没有许多浏览器. 这里是我的字体CSS: @font-face { font-family: "Gulim"; src: url("/style/fonts/Gulim.ttf"); src: local("Gulim"), url("/style/font

  • 像素化的跨浏览器的图像缩放 2012-07-10

    我想缩放图像与规模= 2.0. 我想做,没有任何平滑,因此所需的效果是将原始图像的每个像素到相同颜色的2×2像素. 我不知道这是否可能在Javascript / CSS做一个跨浏览器(> = IE7)的方式,而不诉诸<canvas />标记. --------------解决方案------------- 对不起,我不相信你想要的效果,可以跨浏览器没有画布. 在Firefox在画布中,你可以做ctx.mozImageSmoothingEnabled = false;但是,当你要得到的接近

  • 保证金底有点跨浏览器的灰色地带 2013-09-05

    当我用保证金底是CSS,结果跨浏览器不同(ESP可爱IE)是什么影响了CSS属性"页边距"还有什么其他的规则做我需要检查我实现之前,我可以看到在所有浏览器一致的结果. .. --------------解决方案------------- 有些浏览器(IE)崩溃边缘. 它不只是影响下边距,而且顶部. 如果你有两个堆叠的元素,既以保证金margin: 10px 0 15px;你可能会认为会有两个之间的间隔25像素. 然而,IE浏览器崩溃的边缘,因此所有剩下的就是最伟大的保证金(这是15px

  • 我怎么能强制表单元素来呈现相同的跨浏览器? 2014-05-27

    下面是我的联系表格的外观在所有不同的浏览器的图像: 我试着编辑一些CSS的,但我在寻找对这些元素的完全控制权,但我也不想失去弹性(我也使用jQuery). 有没有办法覆盖浏览器渲染这些文本区域的方法,还是我坚持的默认样式? --------------解决方案------------- 看看normalize.css(表单元素上293开头). normalize.css让浏览器渲染的所有元素一致,并符合现代标准. 这不是一个快速解决,但至少它会给你的元素来工作的一些一致性. 如果您使用此,请确保

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 1.248 (s). 11 q(s)