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>

CSS 一个按钮中有超过 1 个渐变背景

CSS More than 1 background with gradients in a button

html

css

gradient

button