【问题标题】:Background-image - Webp, display in older Safari versionsBackground-image - Webp,在较旧的 Safari 版本中显示
【发布时间】:2021-10-21 23:46:10
【问题描述】:

我需要在旧 Safari 版本中以 background-image 显示我的 .png,而对于其余浏览器,只需显示 .webp 格式。

我只需要通过 CSS 和 HTML 来完成。没有插入脚本。 (@supports 也不支持旧的 Safari 版本)。

感谢您的建议!

【问题讨论】:

  • 到目前为止你有什么尝试?
  • 好吧,我不知道有什么办法,我只有@supports 的想法,但正如我所说,它不受支持。使用 不是选项作为它的背景图片

标签: html css sass safari


【解决方案1】:

Safari 目前不支持 webp 格式,我不确定它是否计划在不久的将来实施。但是你可以让浏览器选择是像这样使用 webp 还是 jpg。

浏览器足够智能,可以只下载和使用受支持的最佳图像。

你可以给一个后备或默认的img

参考这个 - How to add webp support in Safari browser

【讨论】:

  • 嗯,这看起来像是我一直在寻找的东西,遗憾的是我将有机会在周一在 IOS 上对其进行测试,如果它有效,您将获得赏金 :) 谢谢伙计!
  • 您好,我刚刚在 Safari 上测试过,遗憾的是这个选项不起作用。图像仍然不显示。
【解决方案2】:
<picture>
  <source srcset="
    /uploads/img_small.webp 1x,
    /uploads/img_big.webp 2x" type="image/webp">
  <source srcset="
    /uploads/img_small.jpg 1x, 
    /uploads/img_big.jpg 2x" type="image/jpeg">
  <img src="/uploads/img_small.jpg">
</picture>

以上示例允许浏览器选择 .jpeg 或 .webp 图像。

就 .webp 而言,它在 Safari 14 上可用

Answer Source

【讨论】:

  • 我需要
    上的 background-img,而不是 。不过谢谢你的回答。
【解决方案3】:
<picture>
  <source type="image/svg+xml" srcset="stackoverflow.svg">
  <source type="image/webp" srcset="stackoverflow.webp">
  <img src="stackoverflow.png">
</picture>

这允许浏览器拒绝不支持的文件类型。

Source

【讨论】:

    猜你喜欢
    • 2019-10-06
    • 1970-01-01
    • 2015-02-11
    • 1970-01-01
    • 2011-10-14
    • 1970-01-01
    • 1970-01-01
    • 2012-03-01
    • 1970-01-01
    相关资源
    最近更新 更多