Question

我使用png图像作为表格中td的背景。我正在使用“background-size：cover”来使其响应。但是背景图像在较小的窗口上变得模糊。全尺寸的罚款。有什么方法可以阻止这种情况吗？

<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图像。

Answer 2

如果您想以响应方式执行此操作，可以考虑在较小的屏幕上使用较小的图片，并使用媒体查询 -

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

Answer 3

问题不在于bakcground-size roule，proglem是背景位置：中心。尝试更改图像渲染css roule。

Answer 4

可以设置表格宽度吗？

table {
    width: 100%;
}

CSS3响应背景图像变得模糊

4 个答案: