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>