css - 在多个内容属性中引用 base64 数据

Question

有没有一种方法可以定义一次并在多个内容属性中引用它，而不是多次使用相同的 base64 数据？

div#my_id1 {
    content: url(data:image/png;base64,...);
}

div#my_id2 {
    content: url(data:image/png;base64,...);
}

我不能使用类，因为我需要能够将它与 css 分页媒体选择器一起使用：

@page main_content:left {
    @top-left {
        content: ...

我也不能使用 javascript，因为 CSS 不是由浏览器呈现，而是由 CSS 分页媒体处理器（Prince XML）呈现。

score 1 · Accepted Answer

创建包含图像的 CSS 类：

.logo_image_data {
    background-image: url(data:image/png;base64,...);
    background-size: 300px;
}

将具有该类的元素添加到 html：

<div id="running_logo_image" class="logo_image_data"></div>

使它成为一个运行元素：

div#running_logo_image {
    position: running(logo_image);
    background-repeat: no-repeat;
    display: inline-block;
}

并在需要的地方使用它：

@page {

  @top-left {
      content: element(logo_image);
  }
  ...
}

1 回答 1