This example renders three overlapping rectangles. The red rectangle should be drawn with 75% opacity. It partly covers the blue and the green rectangle. The stacking order of the rectangles is defined by their z-index.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
OK OK with issues Error Unsupported

HTML input

<!DOCTYPE html>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <div class="box" id="box-1"></div>
        <div class="box" id="box-2"></div>
        <div class="box" id="box-3"></div>


@import url("../styles/a4.css");

.box  {
    width: 8cm;
    height: 8cm;
    border: 1px solid blue;

#box-1 {
    background-color: blue;
    position: absolute;
    left: 2cm;
    top: 2cm;
    z-index: 0;

#box-2 {
    background-color: rgba(255, 0, 0, 0.75);
    position: absolute;
    left: 4cm;
    top: 4cm;
    z-index: 100;

#box-3 {
    background-color: green;
    position: absolute;
    left: 6cm;
    top: 6cm;
    z-index: -100;