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响应背景图像变得模糊

回答

相关问题