如何使css背景大小線性縮放？

所以，當我縮放CSS3的背景圖像，使用background-size屬性，像這樣：如何使css背景大小線性縮放？

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

然後縮放圖片： Like this

我怎樣才能使它所以畫面沒有模糊狀那？沒有更高分辨率的圖像可能嗎？

2014-02-26 PitaJ

是的，你需要更高分辨率的圖像。 –

我不知道我是否明白這一點。你想放大一張圖片的分辨率嗎？ – matewka

SVG FTW！（是的，你已經用完了分辨率） – bjb568

如果整個背景圖像純粹只是一條黑線，如圖所示，在保存圖像之前，將其更改爲索引圖像（而不是RGB），併爲其指定一個僅有兩種顏色的索引。這樣就不會出現模糊（抗鋸齒），並且它可以很好地縮放。它也會使你的背景圖像成爲一個非常小的文件大小，這有助於快速加載。將索引圖像保存爲png或gif。

2014-02-26 21:38:13 jodamo5

不知道這是否真的有效，但它是一個好主意！ –

或者，您可以使用SVG等圖像類型來處理比例操作。

雖然SVG規範主要集中在矢量圖形標記語言，它的設計包括像Adobe的PDF頁面描述語言的基本能力。它包含豐富圖形的條款，並且與CSS兼容以實現樣式目的。 SVG具有將每個字形和圖像放置在打印頁面上的選定位置所需的信息

2016-03-21 23:21:18 DavidG

回答