内容：飞碟中的 url('image.png') @page @top-left

【问题标题】：content: url('image.png') in flying saucer @page @top-left内容：飞碟中的 url('image.png') @page @top-left
【发布时间】：2014-10-14 21:35:51
【问题描述】：

飞碟是否支持将图像放入 CSS3 margin-boxes？

我尝试了类似的东西

@page {
    @top-left {
        content: url('/resources/media/image.png');
    }
}

但这似乎不起作用。有什么解决方案可以将图像放在我想要的位置吗？

【问题讨论】：

标签： image css flying-saucer xhtmlrenderer

【解决方案1】：

您可以将图像设置为div的背景，并将div放在左上角。

这是一个示例：

<html>
<head>
    <style>
    @page {
        @top-left {content: element(top-left)}
    }
    #div-top-left {
        position: running(top-left);
        height:50px;width:50px;
        background-image: url('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png');
    }
    </style>
</head>
<body>
    <div id="div-top-left"></div>
</body>
</html>

【讨论】：