CSS超過1個背景，漸變在一個按鈕

Question

所以我有一個按鈕，它有一個漸變。該按鈕能夠在所有瀏覽器中工作，因爲它的所有前綴。但我想添加一個更小的背景，這是一個小型的圖像。事情是我似乎無法居中該按鈕，並在所有的梯度之上。它甚至不會顯示？看看下面的代碼：

#mcodebtn { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://s3.amazonaws.com/content.newsok.com/newsok/images/video-icon-play.png); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -o-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
 
    -webkit-border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    border-radius: 0px; 
 
    font-family: Arial; 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.form1btn { 
 
    position: absolute; 
 
    left: 103px; 
 
    width: 100px; 
 
    height: 46px; 
 
}

<div class="form1btn"> 
 
    <input type="button" id="mcodebtn" value=""> 
 
</div>

基本上我試圖做的是那部戲的圖像添加到按鈕的中心，同時仍保持漸變背景和所有其他瀏覽器前綴。

任何想法？

Answer 1

這是你要找的結果嗎？

#mcodebtn { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: -o-linear-gradient(top, #3498db, #2980b9); 
 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
 
    -webkit-border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    border-radius: 0px; 
 
    font-family: Arial; 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.form1btn { 
 
    position: absolute; 
 
    left: 103px; 
 
    width: 100px; 
 
    height: 46px; 
 
    
 
} 
 

 
.imgbutton{ 
 
position: relative; 
 
display: block; 
 
height: 32px; 
 
width: 32px; 
 
margin: 8px auto 0 auto; 
 

 
    
 

 
}

<div class="form1btn"> 
 
    <input type="button" id="mcodebtn" value=""><img class="imgbutton" src="http://s3.amazonaws.com/content.newsok.com/newsok/images/video-icon-play.png" /> 
 
</div>

Answer 2

你需要與你的梯度創建圖像，然後兩個圖像應用到你的<input>。像this之一。

#mcodebtn { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://i40.tinypic.com/fcnu2x.png), url(http://www.blirk.net/wallpapers/preview/gradient-wallpaper-1.jpg) ; 
 
    -webkit-border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    border-radius: 0px; 
 
    font-family: Arial; 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.form1btn { 
 
    position: absolute; 
 
    left: 103px; 
 
    width: 100px; 
 
    height: 46px; 
 
}

<div class="form1btn"> 
 
    <input type="button" value="" id="mcodebtn"> 
 
</div>