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

时间:2016-02-17 09:11:47

标签: ios css iphone safari background-blend-mode

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

由于

4 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

答案 3 :(得分: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>

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