我在我的标题上可疑地使用了背景混合模式: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游戏中看起来难以辨认。
由于
答案 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-style
或border
等任何变体)可解决此问题。
答案 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>
会有一个小的滞后,但是我认为这是合理的,因为它只会影响越野车客户。