在我的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] 删除。
我来说两句