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

Question

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

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

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

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

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

我也不能用javascript，因为CSS不是浏览器渲染的，而是css分页媒体处理器（王子XML）。

Answer 1

创建 CSS class 包含图像：

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

将具有 class 的元素添加到 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);
  }
  ...
}

reference base64 data in multiple content properties