Ссылаться на данные base64 в нескольких свойствах контента

Question

Вместо нескольких одних и тех же данных base64, есть ли способ определить их один раз и ссылаться на них в нескольких свойствах контента?

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

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

Я не могу использовать класс, потому что мне нужно иметь возможность использовать его с css paged media selector:

@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);
  }
  ...
}