在Firefox中加载回退背景图像
我一直在努力提高我的网站页面速度。我计划使用AVIF格式的图像。仅在最新的Chrome浏览器版本中支持此图像格式。为了提供一个备用图像，我使用了这个CSS：
.banner-bg {
background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}
.banner-bg{
background: url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}这在Chrome中运行良好，在Chrome中只加载AVIF bg图像，而忽略jpg格式。在旧版本的Chrome中，将忽略AVIF格式，并加载jpg格式。
页面中只加载了一个图像。而在Firefox和其他浏览器中，AVIF格式被忽略，并且不加载jpg。我尝试使用下面的代码，但两种格式的图像都加载到了页面中，这增加了我的页面大小。
.banner-bg {
background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'), url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}有没有办法在Firefox中提供一个后备背景图像，它只在默认背景图像被忽略时加载？
回答 3
Stack Overflow用户
发布于 2020-10-14 17:23:36
您好，在您的css元素中使用此代码，您希望bg + fallbackbg：
bg {
background-image: url(/images/top-landing-home-cropped.jpg);
background-image: -webkit-image-set(url(/images/top-landing-home-cropped.webp)1x );
}浏览器将尝试加载WEBP，如果无效的话。或者有一个错误代码，它将加载JPG。
对于<img>元素，你可以使用这个'hack‘，这个’hack‘在我的网站上进行了100%的测试，从2020年10月14日起所有常见的浏览器都是这样的：
<img alt="" src="/images/xx.webp" onerror="this.onerror=null; this.src='/images/xx.png'">如有任何问题，请留言，谢谢
Stack Overflow用户
发布于 2020-10-14 17:31:14
通常，回退的工作原理是这样的：
<picture>
<source srcset="img/Image.avif" type="image/avif">
<img src="img/image.jpg" alt="Alt Text!" type="image/jpg">
</picture>但是，如果您想使用background-image，您可以尝试使用与@supports的组合
.banner-bg{
background: url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.jpg'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
@supports(content-visibility: auto) {
background: url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}
}由于content-visibility对浏览器的支持也非常低，因此您可以检查浏览器是否有此功能，如果有，则加载avif图像。
注意:不能保证如果你加载了avif，它就会被显示出来。
https://caniuse.com/?search=avif
https://caniuse.com/?search=content-visibility
它们具有相似的浏览器支持
另外，一些非常老的浏览器不支持@supports。我再次推荐使用<picture>方法
Stack Overflow用户
发布于 2020-10-14 23:41:52
根据caniuse提供的信息，Chrome85及以上版本支持avif格式。考虑到这一点，您可以使用JavaScript实现一个基本的浏览器检测，并动态添加一个引用所需文件格式的类：
HTML
<body>
<div class="banner"></div>
<script src="https://unpkg.com/bowser@2.10.0/es5.js"></script>
<script>
// Get the banner
const banner = document.querySelector('.banner');
// Initialize bowser and get the results
const { parsedResult } = bowser.getParser(window.navigator.userAgent);
// Isolate the browser
const { browser } = parsedResult;
// Get the version number and name for Chrome
const verNumber = Number(browser.version.split('.')[0]);
const browserName = browser.name;
// Conditionally load backgrounds
if (browserName == 'Chrome' && verNumber >= 85) {
banner.classList.add('banner-bg-avif');
} else {
banner.classList.add('banner-bg-jpg');
}
</script>
</body>CSS
.banner {
height: 400px;
}
.banner-bg-jpg {
background-size: cover;
background-image: url('photo.jpg'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}
.banner-bg-avif {
background-size: cover;
background-image: url('photo.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}注意：general consensus似乎是本机用户代理检测有点不可靠，这就是为什么这个示例利用Bowser来改进浏览器检测。
https://stackoverflow.com/questions/64350110
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号