有没有办法制作Safari专属的背景图片？

Question

我的 Tumblr 博客现在使用带有 background-attachment:fixed 的背景图片
它在 Windows 和 Android 上完美运行
但是，根据 caniuse.com（文章链接），此属性适用于除对于 Safari，它会放大并且模糊。
有什么方法可以制作 Safari 独有的背景吗？
如果没有，我如何使用属性 background-color:black 作为替代，如果独占图片无法使用？
谢谢！

Answer 1

您可以使用像 Modernizr 这样的库。 https://modernizr.com/

加载后，它将向您的 html 添加类名，然后您可以使用它来定位标记中的特定 CSS。

但是，如果这就是您所做的一切，那么 Modernizr 是一个很大的库。我一直更喜欢这个小得多的图书馆：

https://rafael.adm.br/css_browser_selector/

例如，通过此功能，您可以专门使用 css 来定位浏览器。

h2 {
   background-color: red;
}

.safari h2 {
   background-color: orage;
}

.ie h2 {
   background-color: yellow;
}

该页面上有很多示例。您可以组合和嵌套，也可以针对特定版本和操作系统。

或者，您也可以相对轻松地推出自己的函数：

function detectUserAgent() {
    var str = '';
    if ((navigator.userAgent.indexOf('Opera') || navigator.userAgent.indexOf('OPR')) != -1) {
        str = 'opera';
    } else if (navigator.userAgent.indexOf('Edg') != -1) {
        str = 'edge';
    } else if (navigator.userAgent.indexOf('Chrome') != -1) {
        str = 'chrome';
    } else if (navigator.userAgent.indexOf('Safari') != -1) {
        str = 'safari';
    } else if (navigator.userAgent.indexOf('Firefox') != -1) {
        str = 'firefox';
    } else if (navigator.userAgent.indexOf('MSIE') != -1 || !!document.documentMode == true) {
        //IF IE > 10
        str = 'ie';
    } else {
        str = 'unknown';
    }
    return str;
}

document.querySelector('html').classList.add(detectUserAgent());

不过我想说的是，我非常确定你可以使用 css 实现你想要的效果，而不必只为 Safari 编写 hack 或后备。