5

我在这里的标题上成功地使用了背景混合模式：https ://yogrow.co/ecommerce-stack

但是我注意到背景混合模式不适用于 iPhone。我只是没有背景颜色。

这是我正在使用的 CSS

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

是使用媒体查询创建一组新的 css 规则的唯一/最佳选择，或者是否有另一种方法来进行后备，因此对于 iPhone Safari 等不显示颜色的设备，背景会变为红色。

因为我在背景顶部有白色文本，所以它目前在 iPhone safari 上看起来难以辨认。

谢谢

4

4 回答 4

13

似乎背景混合模式不适用于background-repeat: repeat;. 尝试设置background-repeat: no-repeat;。

于 2017-03-03T15:38:09.160 回答
1

safari 似乎不支持背景混合模式的以下模式：hugh、saturation、color 和 luminosity

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

于 2016-12-05T20:53:36.263 回答
0

background-repeat: no-repeat为我工作，但在我们的应用程序中，有问题的元素有时可能具有重复的背景，因此该解决方案是不够的。我发现（在 iOS 10.2 中）任何带有border-styleset 的元素都不会尊重background-blend-mode；即，图像和颜色不会融合。删除border-style（或任何变体，如border-bottom-styleor border）解决了这个问题。

于 2017-05-09T16:25:00.617 回答
0

我的设计中绝对需要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>

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

于 2020-02-13T22:29:58.167 回答