CSS3響應背景圖像變得模糊

我使用png圖像作爲表內td的背景。我使用「background-size：cover」來使其響應。但背景圖像在較小的窗口上變得模糊。它在全尺寸上很好。有什麼辦法可以防止這種情況發生？CSS3響應背景圖像變得模糊

<table> 
    <tr> 
    <td style="background-image: url(image.png)"> 
     <div></div> 
    </td> 
    </tr> 
</table> 


css: 
table td{ 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 96px; 
}

來源

2014-09-23 Imrul.H

您可以使用媒體查詢將背景大小從封面改爲不封面？ – Jack 2014-09-23 08:04:05

是否嘗試過，background-size：contains; – 2014-09-23 08:12:36

-1

可以設置表格寬度嗎？

table { 
    width: 100%; 
}

來源

2014-09-23 08:09:47

號

PNG圖像是基於像素的。無論你做什麼，縮放它都會使它變得模糊。也許你正在用高分辨率顯示器在智能手機上觀看圖像，情況會更糟。

唯一真正的解決方案是使用矢量圖形，如SVG圖像。

來源

2014-09-23 08:12:17 kasimir

我也想過使用矢量圖像。但是有很多圖像。無論如何，猜測沒有其他選擇..謝謝你的回覆。 – 2014-09-23 08:19:14

只是爲了節省您的時間;-)無論如何，您可以使源圖像本身有點模糊或稍微模糊它/將漸變放在它上面，使其不那麼明顯。畢竟背景圖片在背景中不應該太大 – kasimir 2014-09-23 15:07:42

如果你想要做一個迴應的方式，你可以考慮在一個較小的屏幕使用更小的圖像，與媒體查詢 -

HTML：

<table> 
    <tr> 
    <td class="background-one"> 
     <div></div> 
    </td> 
    </tr> 
</table>

CSS：

table td { 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 96px; 
} 

.background-one { 
    background-image: url('image-1.png'); 
} 

@media all and (max-width: 420px) { 
    .background-one { 
     background-image: url('image-1-small.png'); 
    } 
}

來源

2014-09-23 08:35:58 Eternal1

問題不在於bakcground大小的roule，proglem是背景位置：center。嘗試更改圖像渲染CSS輪盤。

來源

2015-09-18 14:50:49 wntsmk

CSS3響應背景圖像變得模糊

回答

相關問題