HtmlRenderer 不渲染来自 css 的背景图片

Question

我使用 HtmlRenderer 从 html 标记生成 jpg 图像。但是它不应用来自 css:

的背景图片

<div style="background:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw); width: 440px; height: 361px">
   Some content here.
</div>

这是 C# 代码：

String ecardHtml = File.ReadAllText("testWithGoodImage.html");
using (Image img = HtmlRender.RenderToImageGdiPlus(ecardHtml, maxWidth: 440, textRenderingHint: TextRenderingHint.AntiAliasGridFit))
{
    img.Save("result.jpg");
}

调试显示连图片都没有请求，所以我怀疑是不支持的。然而 <img> 元素确实工作得很好。

所以问题是如何让它发挥作用。

我知道我可以在 HtmlRenderer 中在图像上呈现 html，但我只想在 html 代码中包含所有标记。

Answer 1

HTML 渲染器支持背景图像 CSS，如果你真的想
在 HTML 中使用它，那么像这样的东西就可以完成工作：

<div style="width: 440px; height: 361px;position:relative">
    <div style="position:absolute;top:0;left:0;z-index:8888"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw"/></div>
    <div style="position:absolute;top:0;left:0;z-index:9999">Some content here.</div>       
</div>

或者简单地添加背景图像而不仅仅是背景

<div style="background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw); width: 440px; height: 361px">
   Some content here.
</div>

HtmlRenderer 不渲染来自 css 的背景图片

HtmlRenderer doesn't render background image from css

.net

html

css

c#

html-rendering