我正在开发一个网站,想要实现 svg 文件来帮助视网膜显示,但想要后备 png 文件作为备份。 这是 html/js/css;
<div id="band">
</div> <!--band-->
<script>
$(document).ready(function() {
if (Modernizr.inlinesvg) {
//SVG.
$('#band').html('<img src="barbGradient.svg" />');
} else {
//No SVG.
$('#band').html('<img src="barbGradient.png" />');
}
});
</script>
这是CSS;
}
.no-inlinesvg div#band {
position: relative;
top: -950px;
background-repeat: repeat-x;
background-image: url('../_images/barbGradient.png');
z-index: -1;
}
.inlinesvg div#band {
position: relative;
top: -950px;
background-repeat: repeat-x;
background-image: url('../_images/barbGradient.svg');
z-index: -1;
}
所有浏览器的渲染都非常糟糕!我知道我可以包含两个不同分辨率的 png,但我发现 js 方法更聪明!任何帮助将不胜感激!
最佳答案
我会坚持使用 png 解决方案。 99.5% 的用户不会注意到。 HTML spec还没有为此做好准备(编辑草案),并且实现不当的成本超过了 IMO 带来的好处。如果您仍然想要这个,请查看 this solution .但再次引用 polyfill 开发人员的话:
"Note: Supporting this many breakpoints quickly adds size to the DOM and increases implementation and maintenance time, so use this technique sparingly."
关于javascript - jQuery 和 svg 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12335070/