如何在浏览器中保持图像质量

Question

我在Photoshop中设计了一个箭头形状图像（100px * 25px）。我在HTML标签背景中使用该图像。我已经编写了CSS来动态更改图像宽度。但是当标签宽度减小时，它的锐度会发生变化。因此，我可以根据宽度变化保持原始质量。

Answer 1

您可以创建多个版本的图片，并通过媒体查询逐个使用它们。

<强>更新 这是一个例子：

@media screen and (max-width:1024px) {
label {
background-image: url(high-quality-img-url.png);
/*other rules go here....... */
}

@media screen and (max-width:786px) {
label {
background-image: url(medium-quality-img-url.png);
/*other rules go here....... */
}

@media screen and (max-width:480px) {
label {
background-image: url(low-quality-img-url.png);
/*other rules go here....... */
}