在Safari中禁用平铺背景平滑

Question

是否可以在Safari中禁用背景平滑？ 例如，我正在尝试像这样平铺背景：

div#dashed
{
  width: 10rem;
  height: 7rem;
  border: 1px solid #000;
  background: url("https://tut.etogo.net/_files/diagonalbg.png");
}

<div id="dashed">

因此，背景是这样的：

我希望背景看起来像这样（缩放）：

但是在Safari中，它看起来像这样： 缩放：

因此，我看到Safari在边缘上进行了一些抗锯齿/平滑处理-是否可以禁用它？我尝试了不同的“图像渲染”参数，但没有成功。在IE，Edge，FF，Chrome和Opera中进行了尝试-一切都可以正常显示，但在Safari中却不能。也许有一些CSS吗？

Answer 1

我认为这是因为您的背景是重复的。 你可以尝试一下 background-size:cover; background-repeat: no-repeat;

设置背景图片的大小。

Answer 2

作为使用图像的替代方法，您可以使用纯CSS达到相同的效果。

.gradient {
  width: 200px;
  height: 200px;
  background: repeating-linear-gradient(-45deg, #000, #fff 1px, #fff 15px);
}

<div class="gradient"></div>

您可能想摆弄一下以获得预期的结果。

有关更多信息，请参见https://css-tricks.com/stripes-css/