CSS渐变和渐变上方的背景图像答案

【问题标题】：CSS gradient and background-image above gradientCSS渐变和渐变上方的背景图像
【发布时间】：2012-10-01 14:21:23
【问题描述】：

我的问题是：如何让我的 2 个背景图像出现在 CSS 渐变上方的右侧和左侧。我正在使用 JA Elastica 模板（修改默认 CSS）在 Joomla 网站上工作。

在我当前的CSS中，如果我将“背景：url（'images'）”放在渐变上方，那么它会显示图像而不是渐变，如果我将它放在渐变下方，它会显示渐变而不是图像.

我目前使用的代码是这样的：

body#bd {
background-image: linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -o-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -moz-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -webkit-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -ms-linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(142,210,46)),
color-stop(0.51, rgb(171,252,74)),
color-stop(0.76, rgb(206,255,104)));
background:
url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right,
url('https://dl.dropbox.com/u/6512758/onebeat.ro/left.png') no-repeat top left;
}

【问题讨论】：

标签： css background-image gradient

【解决方案1】：

所有内容都需要在同一个 background-image 属性上，否则前一个背景语句将被下一个替换。例如：

background-image: url('https://dl.dropbox.com/u/6512758/onebeat.ro/right.png') no-repeat top right, linear-gradient(bottom, rgb(142,210,46) 2%, rgb(171,252,74) 51%, rgb(206,255,104) 76%);

点击此处查看更多示例： How do I combine a background-image and CSS3 gradient on the same element?

【讨论】：

谢谢你的链接，我去查一下