在 Safari 中禁用平铺背景平滑答案

【问题标题】：Disable tiled background smoothing in Safari在 Safari 中禁用平铺背景平滑
【发布时间】：2018-11-16 07:50:14
【问题描述】：

有没有办法在 Safari 中禁用背景平滑？例如，我正在尝试制作这样的平铺背景：

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

&lt;div id="dashed"&gt;

所以，背景是这样的：

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

但在 Safari 中它看起来像这样：放大：

所以，我看到 Safari 对边缘进行了一些抗锯齿/平滑处理 - 有没有办法禁用它？我尝试了不同的“图像渲染”参数，但没有成功。在 IE、Edge、FF、Chrome 和 Opera 中尝试过——一切都很好，但在 Safari 中却不行。也许有一些CSS？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

&lt;div class="gradient"&gt;&lt;/div&gt;

您可能想摆弄以达到预期的结果。

更多信息和提示可以在https://css-tricks.com/stripes-css/找到

【讨论】：

【解决方案2】：

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

设置背景图像的大小。

【讨论】：