javascript - 不支持 svg 的浏览器的 CSS hack

标签 javascript html css svg

我的代码:

猕猴桃公司

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

如何为不支持SVG的浏览器制定规则?

有一种方法是通过库 Modernizr

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
    background-image: url(logo.png);
}

有没有这个库的方法?

最佳答案

支持 svg 的浏览器也支持多背景,所以你可以这样做:

.logo {
  background: url(kiwi.png);
  background: none, url(kiwi.svg);
}

关于javascript - 不支持 svg 的浏览器的 CSS hack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24402775/

相关文章:

CSS 内联编码

javascript - 如何在音频时间更新上获取 clientx

c# - C# 中全局替换 javascript 代码

javascript - 带有悬停和工具提示的堆叠图片

css - 你如何显示可以切换的元素(UI)

Android:strings.xml 中的 html

javascript - 表单的输入默认文本

javascript - 让我的搜索框容易受到 XSS 攻击

javascript - 我想在鼠标悬停时更改框中的文本

html - CSS 在文本区域中的所有初始中断 firefox 换行符