具有线性渐变和图像的背景图像不起作用（使用 Wordpress）答案

【问题标题】：Background image with both linear gradient and image not working (using Wordpress)具有线性渐变和图像的背景图像不起作用（使用 Wordpress）
【发布时间】：2015-04-16 22:34:24
【问题描述】：

代码如下：

style="background-image: linear-gradient(151deg,#6a7a8f 9%,#8692A4 30%,#a9b1be 49%, #ced2d9 66%, #f1f0f1 88%),url(<?php echo $page['image']; ?>);"

它在 div 上，由于某种原因，线性渐变是唯一出现的东西。当我将 url() 放在线性渐变前面时，图像是唯一出现的。

我查看了其他非常相似的 stackoverflow 问题，但我无法让它发挥作用。

【问题讨论】：

你能给我们展示一下 WordPress 渲染的 HTML 吗？（即：在您的浏览器中查看源代码，而不是您在 WordPress 编辑器中编辑的内容。）此外，您可以将其隔离到 jsfiddle 吗？根据stackoverflow.com/questions/2504071/…，看起来不错。

标签： html css wordpress less

【解决方案1】：

您使用的是纯色 (HEX)，因此它们会覆盖您的图像。您必须使用 RGBA 颜色。

像这样：

style="background-image: linear-gradient(151deg,rgba(106,122,143,0.5) 9%,rgba(134,146,164,0.5) 30%,rgba(169,177,190,0.5) 49%, rgba(206,210,217,0.5) 66%, rgba(241,240,241,0.5) 88%),url(<?php echo $page['image']; ?>);"

【讨论】：

这是真的——在某种程度上。但是，如果您应该澄清一下 - 将 url() 部分放在首位，您就会将图像放在渐变的顶部。
不确定 OP 想要什么，要求澄清在 WP 中呈现的内容与正在编辑的内容。