CSS：为iPhone Safari提供背景混合模式备选方案

Question

我在这里成功地使用了background-blend-mode来制作我的标题： https://yogrow.co/ecommerce-stack

然而，我注意到在iPhone上background-blend-mode不起作用。我只是得不到背景颜色。

这是我正在使用的CSS：

background-repeat: repeat;
background-image: url("assets/img/swirl_pattern.png");
background-color: #E33551;
background-blend-mode: multiply;

在创建新的CSS规则集方面，使用媒体查询是否是唯一/最佳选择，还是是否有其他选择，可以让像iPhone Safari这样不显示颜色背景的设备出现后备，以便背景变为红色。

因为我在背景上有白色文本，所以当前在iPhone Safari上看起来难以辨认。

谢谢

- ejntaylor

---

我一直遇到同样的问题。我发现background-repeat：repeat;会导致混合模式在iOS上停止工作。我不知道为什么，但如果将其设置为“no-repeat”，则可以解决该问题。但显然，这并不是一个理想的解决方案。 - Garconis

感谢您分享这个技巧。它解决了我遇到的问题。 - user6995383

Answer 1

似乎 background-blend-mode 无法与 background-repeat: repeat; 配合使用。尝试将其设置为 background-repeat: no-repeat;。

- Катя Графінська

---

是的。规则 background-repeat: no-repeat; 帮助了我。 - Hydrock

Answer 2

看起来，Safari不支持以下背景混合模式：色相、饱和度、颜色和亮度。

我看到问题的作者没有使用上述任何一种，但这可能会帮助其他人。

- Gerrie Pretorius

---

这适用于 mix-blend-mode 而不是 background-blend-mode。 - user670839

请问您能否分享任何关于不支持 mix-blend-mode 的项目的链接？ - Vigneshwaran Sivalingam

我认为 darken 也不起作用。至少在 mix-blend-mode 上是这样的。 - Cooper Scott

Answer 3

在我的设计中，我绝对需要background-repeat。我有一个透明的PNG覆盖在一个纯色上（一个线性渐变层）。

解决方法并不完美：我加载UAParser.js，并测试(iOS && WebKit)。

<script src='https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.21/ua-parser.min.js'></script>
<script>
window.workaroundBackgroundBlendMode = (function() {
  var ua = UAParser()
  var isWebKit = (ua.engine.name === "WebKit")
  var isIOS = (ua.os.name === "iOS")
  var debug = false //|| true
  var shouldActivate = (isWebKit && isIOS) || debug;

  if (shouldActivate) {
    document.body.classList.add("is-ios-webkit")
  }

  // You can inspect this returned object afterwards
  return {isWebKit, isIOS, debug, shouldActivate, ua}
})()
</script>

会有一点延迟，但我认为这是合理的，因为它只影响有问题的客户端。

- Jonathan Allard

Answer 4

background-repeat: no-repeat 对我有用，但在我们的应用程序中，相关元素有时可能具有重复的背景，因此该解决方案不足以解决问题。 我发现（在iOS 10.2中），任何设置了border-style的元素都不会尊重background-blend-mode；即图像和颜色不会混合。 删除border-style（或任何变体，如border-bottom-style或border）可以解决此问题。

- Jackson