Html img上的提交按钮-响应

我想要这个

在提交按钮上，所以我将其作为背景。 我正在做页面响应，所以我给了它下一个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%;
}

但是当页面变小时，图像会被剪切。

---

如何解决此问题？

如果您拥有或可以将箭头和条形码分别裁剪为透明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

将箭头和条形码放入

中，按钮将以这种方式响应

---

p.S.仅适用于

标签，而不适用于

的按钮类型

使用“背景尺寸”谢谢！太好了！但是我知道我需要使用右减，它会打开一个滚动x，我可以使用hidden，你有什么好的解决方案吗？要定位背景，请使用

背景位置

。。。不知道你说的“打开卷轴-x”是什么意思谢谢！你救了我！