背景梯度背景圖像

我想一個標誌添加到樣式爲漸變一個按鈕，但背景圖像「刪除」，背景色...背景梯度背景圖像

這裏是小提琴： http://jsfiddle.net/FDXy5/及以下是當前tet .css。

.rounded-orange-button { 
text-align: center; 
color: #FFFFFF; 
display: inline-block; 
border-radius: 2px; 
line-height: 27px; 
width: 200px; 
position: relative; 
background: #FF9100; 
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF9100) to(#FA6800)); 
background: -webkit-linear-gradient(top, #FF9100, #FA6800); 
background: -moz-linear-gradient(top, #FF9100, #FA6800); 
background: -o-linear-gradient(top, #FF9100, #FA6800); 
background: linear-gradient(to bottom, #FF9100, #FA6800); 
-pie-background: linear-gradient(to bottom, #FF9100, #FA6800); 
} 

.logo-edit{ 
    background-image: url('http://www.w3schools.com/cssref/smiley.gif'); 
    background-repeat:no-repeat; 
}

感謝幫助我:-)

來源

2014-03-19 clement

可能重複（http://stackoverflow.com/questions/ 2504071/is-it-it-it-combine-a-background-image-and-css3-gradients） –

的graident實際上是一個背景圖像，以及。幸運的是，在現代瀏覽器中，您可以擁有多個背景圖片。

例子：

background-image: url('http://www.w3schools.com/cssref/smiley.gif'), linear-gradient(to bottom, #FF9100, #FA6800);

而且你也需要做供應商特定梯度相同。

jsFiddle

請參閱此鏈接兼容性表：background-image MDN

的[？是否有可能一個背景圖像和CSS3漸變組合]

來源

2014-03-19 07:55:28 Mathias

回答相同... +1 http://jsfiddle.net/FDXy5/2/ –

@Mathias：非常感謝。我有一個問題，你爲什麼只重複線性漸變（到底部，＃FF9100，＃FA6800）;？我是否必須重複其他css類的所有漸變線？ – clement

@Mr。外星人：謝謝:-) – clement

背景梯度背景圖像

回答

相關問題