SVG背景在CSS3 background属性下模糊显示问题实例页面

展示

代码

CSS代码：

.star {
    background-color: #eee;
    padding: 1em;
    width: 8em;
    height: 8em;
    background-repeat: no-repeat;
    background-size: 10em 10em;
    background-position: 1em 1em;
    border-radius: 50%;
}
#star-10 { background-image: url(star-10x10.svg); }
#star-1000 { background-image: url(star-1000x1000.svg); }
#star-10s { background-image: url(star-10x10s.svg); }
            

HTML代码：

<ol>
    <li class="float_three">
        <h4>10×10px SVG</h4>
        <div id="star-10" class="star"></div>
    </li>
    <li class="float_three">
        <h4>1000×1000px SVG</h4>
        <div id="star-1000" class="star"></div>
    </li>
    <li class="float_three">
        <h4>10×10px多边形缩放成1000×1000px</h4>
        <div id="star-10s" class="star"></div>
    </li>
</ol>