HtmlRenderer不渲染css中的背景图像
本文关键字:背景 图像 css HtmlRenderer | 更新日期: 2023-09-27 18:01:15
我使用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>
元素的效果很好。
所以问题是如何使它起作用。
我知道我可以渲染html图像在HtmlRenderer,但我想有所有的标记只有在html代码。
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>
或者直接添加background-image而不仅仅是background
<div style="background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw); width: 440px; height: 361px">
Some content here.
</div>