如何在瀏覽器中保持圖像質量

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....... */ 
}