img on submit按钮 - 响应迅速

Question

我想要

在提交按钮上，所以我把它作为背景。 我正在响应页面，所以我给了它下一个css：

#button1{
   background: url('../images/button1.png') no-repeat;
   margin-top:-270px;
   padding-bottom: 10px;
   padding-right: 2%;
   width: 25%;
   position:relative;
   right:2.5%;
}

但是当页面变小时，图像会被剪切掉。 我该如何解决这个问题？

Answer 1

如果您已经或可以将箭头和条形码分别作为透明PNG或GIF裁剪/裁剪，您可以这样做：

#button1 {
   background: rgba(204,204,204,1);/* Old Browsers */
   background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,204,204,1)), color-stop(100%, rgba(102,102,102,1)));/* Chrome, Safari4+ */
   background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%); /* IE 10+ */
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(102,102,102,1) 100%);/* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#666666', GradientType=0 );/* IE6-9 */
   position: relative;
   border: 0;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}

#button1:after,
#button1:before {
   display: inline-block;
   content: url('img/button-barcode.png');
   margin: .5em;
   vertical-align: middle;
}

#button1:before {
   content: url('img/button-arrow.png');
}

代码使用伪元素::before和::after将箭头和条形码放入<button>，按钮将响应。< / p>

P.S。仅适用于<button>代码，而不适用于<input>的按钮类型！