如何在Sass中使用WebP

缺口

在我的scss文件中,我有:

.banner{
    background-image: url("/images/image.jpg");
}

现在,我已将其转换为WebP图像。我知道,如果它是html中的图像,我应该这样做:

<picture>
    <source type="image/webp" srcset="images/image.webp">
    <source type="image/jpeg" srcset="images/image.jpg">
    <img src="images/image.jpg">
</picture>

但是,如何在Sass SCSS文件中执行类似的操作?(我正在使用Reactjs)

昆汀

无法通过CSS检测到webp支持。

您可能能够实现的最好方法是使用JavaScript来检测支持并将类添加到元素中(例如,使用modernizr)。由于该body元素通常不在React修改的元素范围之内,因此使用modernizr在其中添加类应该不是问题。

然后,您可以使用该类来选择要使用的规则:

.banner{
    background-image: url("/images/image.jpg");
}

.webp .banner{
    background-image: url("/images/image.webp");
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章