php 里引用div背景图片,关于在css背景图中引用webp图片的疑问

最终我还是采用了另一种方案。在根目录的static目录下新建一个css目录，此目录下保存2份css文件。分别为：picture.css(此样式表只保存所有需要转换为webp图片的原始路径)和webp.css(此样式表只保存所有需要转换为webp图片的webp路径)。然后在index.html的

(function() {

let styleTag = document.getElementById('pictureStyle')

// 判断是否有webpSupporta: true这个storage

if (!localStorage.getItem('webpSupport')) {

let image = new Image()

// 图片加载完成时候的操作

image.onload = function() {

// 图片加载成功且宽度为1,那么就代表支持webp了,因为这张base64图是webp格式.如果不支持会触发image.error方法

if (image.width == 1) {

localStorage.setItem('webpSupport', true)

styleTag.setAttribute('href', '/static/css/webp.css')

} else {

styleTag.setAttribute('href', '/static/css/picture.css')

}

}

// 一张支持alpha透明度的webp的图片,使用base64编码

image.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA=='

} else {

styleTag.setAttribute('href', '/static/css/webp.css')

}

}())