引用多个内容属性中的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）呈现。

Answer 1

创建包含图像的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);
  }
  ...
}