html - CSS3 响应式背景图像变得模糊

Question

我使用 png 图像作为表格内 td 的背景。我正在使用“背景大小:封面”来使其响应。但是背景图像在较小的窗口上变得模糊。全尺寸很好。有什么办法可以避免这种情况吗？

<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;
}

Answer 1

没有。

PNG 图像是基于像素的。缩放它会使它变得模糊，无论你做什么。也许您正在具有高分辨率显示屏的智能手机上观看图像，而且情况会更糟。

唯一真正的解决方案是使用矢量图形，例如 SVG 图像。