html - 使用包含 base64 图像数据的样式声明覆盖图像源？

Question

假设我在文档中有一个图像指向标准默认无图像。是否可以指定一个可以用来用 base64 值覆盖该值的类？

HTML：

<img src="loading_icon.png" class="image1"/>
<img src="loading_icon.png" class="image2"/>

CSS：

<style>

    .image1 {
        src: text/base64: ABCD...;
    }

    .image2 {
        src: text/base64: ABCD...;
    }

</style>

标签： htmlcssimage

Answer 1

您可以使用content，但它不适用于所有浏览器

.image1 {
  content:url(https://i.picsum.photos/id/10/200/200.jpg)
}

.image2 {
  content:url(https://i.picsum.photos/id/17/200/200.jpg)
}

<img src="loading_icon.png" class="image1">
<img src="loading_icon.png" class="image2">