當向上縮放時，有沒有辦法保持背景圖像的質量？

-1

我目前正在嘗試爲我正在開發的這個玩具應用設置背景圖片。通過對SO四處尋找，只見被推薦下面的代碼：當向上縮放時，有沒有辦法保持背景圖像的質量？

body { 
background: url(../images/download.jpeg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

但是圖像質量看起來還是我的桌面上可怕的。圖像的原始尺寸爲168px（h）和300px（w）。

任何幫助表示讚賞！

來源

2016-01-31 Timoor Kurdi

如果找到了小圖片的解決方案被調整到大版本而不失品位，你應該提供它的服務，並收取大$ ^^ 但是，如果沒有開玩笑，如果它的規模小圖像總是看起來可怕向上超過一點點。 – migg

啊，所以我在那裏試圖尋找一種方式來追尋整個團隊的鬼魂，謝謝你的回覆！是的，如果我找到了方法，我一定會收取mucho迪內羅:) –

*光柵*圖像的黃金法則是開始大，然後變小。反之亦然。 – Scott

圖像很小，所以爲了使質量更好，您需要找到同一圖像的更高分辨率版本。這也取決於設備的分辨率。

來源

2016-01-31 21:53:49 spacegeek224

您需要轉換現有圖像或查找矢量格式的圖像（.svg，.eps等）。這將允許您縮放圖像，而不會像光柵圖像格式（.jpg，.png等）那樣變爲像素化。

如果感興趣的矢量和光柵圖像之間的差異，請參閱從this article上光柵以下摘錄VS矢量圖：

光柵圖像尺寸以像素爲單位來測量。由於光柵圖像在不失去質量的情況下不能放大，因此不同的供應商對其工藝具有特定的尺寸要求;它們需要特定的像素分辨率：每英寸內的特定數量的像素。圖像中的每個英寸內的像素的量表示圖像像素分辨率或PPI（每英寸象素）

...

矢量圖形由形成或線條中的數學計算的 - 他們不使用像素，因此它們與分辨率無關。

希望這有助於！

來源

2016-01-31 21:53:54 DeveloperACE

這絕對是個好消息！感謝您的詳細回覆。 –

沒問題@TimoorKurdi – DeveloperACE

有不同的方法來解決這個問題。您發佈的CSS代碼基本上會佔用您的圖片並延伸它，以便覆蓋您網站的所有<body>元素（基本上是瀏覽器的屏幕大小）。

爆炸時無法使小圖像看起來很好看。可以做的是存儲不同大小的圖像，並使用媒體查詢根據屏幕大小加載特定圖像。

說你存儲3種不同尺寸：

image_large.jpg (2000 x 2000) 
image_medium.jpg (1000 x 1000) 
image_small.jpg (500 x 500)

然後可以使用CSS加載根據屏幕大小合適的一個：

@media screen and (min-width: 0px) and (max-width: 1000px) { 
    body { 
     background: url(../images/image_small.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
} 

@media screen and (min-width: 1001px) and (max-width: 2000px) { 
    body { 
     background: url(../images/image_medium.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
} 

@media screen and (min-width: 2001px) { 
    body { 
     background: url(../images/image_large.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
}

這可以防止移動設備的小屏幕裝載不必要的大圖像。但是，就像我之前所說的，如果您沒有更高的源圖像分辨率，那麼您運氣不好。

來源

2016-01-31 22:00:23

當向上縮放時，有沒有辦法保持背景圖像的質量？

回答

相關問題