0

我正在开发一个网站，并希望实现 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 方法更聪明！任何帮助，将不胜感激！

4

1 回答 1

1

我会坚持使用 png 解决方案。99.5% 的用户不会注意到。HTML 规范还没有为此做好准备（Editors Draft），而且 hacky 实现的成本超过了 IMO 带来的好处。如果您仍然想要这个，请查看此解决方案。但再一次，这一次引用了 polyfill 开发人员的话：

"Note: Supporting this many breakpoints quickly adds size to the DOM and increases implementation and maintenance time, so use this technique sparingly."

于 2012-09-09T01:48:46.203 回答