如何线性地制作css背景大小比例？

Question

因此，当我在CSS3中缩放背景图像时，使用background-size属性，如下所示：

.one {
    background-image: url(sprites/1.png);
    background-size: 100% 100%;
}

然后它缩放图片：

我怎样才能让图片不那样模糊？没有更高分辨率的图像是否可能？

Answer 1

如果整个背景图像纯粹只是一条黑线，如图所示，在保存图像之前，将其更改为索引图像（而不是RGB），并为其指定仅两种颜色的索引。这样就不会出现模糊（抗锯齿），它会很好地扩展。它还可以使您的背景图像文件非常小，有助于快速加载。将索引图像保存为png或gif。

Answer 2

或者，您可以使用像SVG这样的图像类型来处理缩放操作。

https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

  

虽然SVG规范主要关注矢量图形标记语言，但其设计包括Adobe PDF的页面描述语言的基本功能。它包含丰富的图形，并与CSS兼容，用于样式。 SVG具有将每个字形和图像放置在打印页面上选定位置所需的信息