wkhtmltoimage 快照中的 CSS3 渐变渲染答案

【问题标题】：wkhtmltoimage CSS3 gradient rendering in Snapshotswkhtmltoimage 快照中的 CSS3 渐变渲染
【发布时间】：2013-03-26 16:37:14
【问题描述】：

我正在使用 wkhtmltoimage 为我的网站呈现包含背景渐变的快照，但它没有显示在生成的快照中。

我尝试在 Ubuntu 和 Windows 上使用，但找不到错误。

我什至尝试过使用不带任何参数的最简单的命令。

wkhtmltoimage.exe <website_link> <image_name>

我的原始页面在所有主流浏览器中看起来都一样这是屏幕打印

这是由 wkhtmltoimage 生成的

我不确定到底是什么问题。我也尝试查看他们现有的问题，但找不到任何东西。

【问题讨论】：

访问该网站的任何更改；是在线的吗？我们可以使用我们的安装进行测试。

标签： wkhtmltopdf wkhtmltoimage

【解决方案1】：

您是否检查了渐变语法。 wkhtmltopdf 使用 webkit 语法。

  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgb(64,128,176)),color-stop(100%,rgb(1,73,129)));
  background:linear-gradient(to bottom,rgb(64,128,176) 0%,rgb(1,73,129) 100%);

第二种语法不计入 wkhtmltopdf，但第一种适用于我拥有的 wkhtmltopdf 版本（0.10.0 rc2）。

我还发现现代 webkit 语法不起作用。即这不起作用

background: -webkit-linear-gradient(top, #ccc 0%, #888 100%);

据此：stackoverflow entry

【讨论】：

我花了一段时间才了解径向渐变的旧格式：background: -webkit-radial-gradient(#fff 5%, #8dcae4 15%, #00a8d7 60%);

【解决方案2】：

与 wkhtmltopdf 的 0.12.2.1 一样，渐变 css - 无论是旧的还是新的都不起作用。

【讨论】：

我观察到同样的情况。我得到了一个渐变，但它几乎就像是在重复，而不是以一种可预测的方式。