上面漸變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?