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

您需要使用渐变创建图像，然后将这两个图像应用到XMLHttpRequest cannot load http://demo.whmcs.com/whois.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.。就像this一样。

＆＃13;

<input>

＆＃13;

#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;
}

＆＃13;

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

2 个答案: