Question

我在我的标题上可疑地使用了背景混合模式：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游戏中看起来难以辨认。

由于

Answer 1

似乎后台混合模式无法与background-repeat: repeat;一起使用。尝试设置background-repeat: no-repeat;。

Answer 2

背景混合模式的safari似乎不支持以下模式：休，饱和度，颜色和光度

我看到问题的作者没有使用上面提到的一个，但它可能对其他人有帮助。

Answer 3

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

Answer 4

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

会有一个小的滞后，但是我认为这是合理的，因为它只会影响越野车客户。

CSS：iPhone Safari的后台混合模式后备

4 个答案: