1

我在使用 CSS background-blend-mode 时遇到了一个令人沮丧的问题，它在任何地方都能优雅地降级；具体来说，iOS 上的 Safari 和 Chrome 似乎逃避了我测试它们以获得支持的努力。

在撰写本文时，除 IE 之外的大多数浏览器的最新版本都支持背景混合模式（至少以基本形式）（请参阅：http ://caniuse.com/#feat=css-backgroundblendmode ）。我正在使用它将纯色背景颜色与灰度纹理混合，如下所示：

.banner-inner {
    background-image: url("../img/banner-bg-texture.png");
    background-color: #7692b4;
    background-blend-mode: overlay;
}

背景混合模式旨在降级，以便如果浏览器不支持它，该浏览器只会看到正常的背景图像。但是，我想专门针对那些不支持的浏览器，以便它们只能看到纯色，如下所示：

.no-background-blend-mode .banner-inner {
    background: #7692b4; // If no blend-mode support, fall back to solid color
}

CSS Tricks和其他人建议使用基于 JavaScript 的测试来支持此属性，我正在使用它：

// Test for background-blend-mode support
    ;(function(window) {

        document.addEventListener("DOMContentLoaded", function() {
            var supportsBackgroundBlendMode = window.getComputedStyle(document.body).backgroundBlendMode;

            if(typeof supportsBackgroundBlendMode === "undefined") {  
                document.documentElement.className += " no-background-blend-mode";
            }
        }, false);

    })(window);

这适用于目标 IE，它获得了正确的 .no-background-blend-mode 类。桌面上的 Chrome、Firefox 和 Safari 都支持混合模式。

这就是问题所在：我正在查看 iOS 8.3 上的 Safari 和 Chrome，它们都通过了测试（typeof supportsBackgroundBlendMode返回“正常”）但未能实现混合模式。（它们都单独显示灰度背景图像，而不是混合）。

任何人都可以帮助我了解这里发生了什么，和/或帮助我找到一种方法来测试和定位这些浏览器的这个功能，这实际上有效吗？谢谢！

更新：仍然没有找到解决这个问题的好方法，这个问题一直存在到 iOS 8.4.1 中（截至本次编辑的最新版本）。

4

0 回答 0