上面渐变CSS渐变和背景图像

Question

我的问题是这样的：我怎样才能让我的2背景图像显示在CSS渐变上方的右侧和左侧。我正在使用JA Elastica模板（修改默认CSS）在Joomla网站上工作。

在我当前的CSS中，如果我把“background：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; 
} 

Answer 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?