【问题标题】: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");
}
<div id="dashed">

所以,背景是这样的:

我希望背景看起来像这样(放大):

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

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

【问题讨论】:

  • 看起来这是不同的问题。它在除 safari 之外的任何浏览器中都能正常工作,并且没有任何帮助,包括来自该问题的建议

标签: html css


【解决方案1】:

作为使用图像的替代方法,您可以使用纯 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/找到

【讨论】:

  • 当然,但只是针对这种情况。这只是一个说明问题的例子,我正在寻找适用于任何图像的解决方案。最后它可以在除 safari 之外的任何浏览器中运行! )))
  • 奇怪的是 image-rendering: pixelated; 理论上应该在 Safari 中工作。我还不知道为什么它不起作用……
  • 刚刚检查了一遍 - 不起作用,完全没有效果。可能它只用于图像,而不用于背景图像
【解决方案2】:

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

设置背景图像的大小。

【讨论】:

  • 当然,是因为重复。我无法设置“封面”,因为它会缩放图像
猜你喜欢
  • 2014-01-08
  • 2011-01-27
  • 1970-01-01
  • 1970-01-01
  • 2014-12-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-15
相关资源
最近更新 更多