我想创建这样的（输入类型=“提交”）一个按钮创建一个平铺背景按钮：
如何使用CSS
使用需要平铺图像，以达到上述效果。 
我已经试过到目前为止这样做：
border: none;
background: url(myImage.png) no-repeat;
background-size: 80px 40px;
padding-left: 40px;
padding-right: 40px;
padding-top: 5px;
padding-bottom: 5px;
不过貌似这是一个很大的与像素数玩弄达到预期的效果。是否有更简单的方法来实现这种效果。
如果你不想乱用渐变，这是一个更简单的方法，因为我看到图像中实际上没有渐变，而是双色调按钮。
您可以通过使用伪元素:before添加50％高的透明白色div而不更改HTML来实现此双色效果。
如果你使用这种方法，你实际上已经对你的按钮有所反思，所以它内部的文字和图标也会有“闪耀”（example）。
#login{
background:#444;
display:inline-block;
color:white;
padding:10px 60px;
border-radius:8px;
position:relative;
}
#login:before{
content:'';
width:100%;
height:50%;
background:rgba(255,255,255,0.2);
position:absolute;
top:0px;
left:0px;
}
[IE <9不支持'rgba']（http://caniuse.com/#search=rgba）fyi –
那么，如果他想支持IE <9'，他可以使用'1x1'像素透明 - 白色图像而不是'rgba'。 PS：另外我建议使用'：after'而不是'：before'，因为闪光实际上位于其他位置之上。 – Cristy
和IE <8不支持':: before' ;-) –
使用CSS3和边界半径
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0); /* IE6-9 */
这将工作，如果button-slice.jpg是40像素高，宽1px的JPG背景瓷砖图案的 “切片”。
.button {
display: inline-block;
width: 170px;
height: 40px;
line-height: 40px;
text-align: center;
background: url(button-slice.jpg) repeat-x;
border: 0;
border-radius: 8px;
text-decoration: none;
}
你也可以完全放弃图像，并使用CSS3渐变来创建背景效果相反，这可能是一个更好的解决方案，如果它仅用于iOS的。
如果这是你想要作为背景使用实际的图像，它很可能是一个更好的主意，只是使用CSS：
input[type="submit"]
{
border: none;
border-radius: 5px;
background: linear-gradient(to bottom, #AAA 49%, #555 50%);
}
既然你可以使用CSS3我强烈建议使用它作为这样的：
input[type="submit"] {
background: #3e3e3e;
background: -moz-linear-gradient(top, #616161 0%, #777777 50%, #3b3b3b 51%, #393939 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#616161), color-stop(50%,#777777), color-stop(51%,#3b3b3b), color-stop(100%,#393939));
background: -webkit-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: -o-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: -ms-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: linear-gradient(to bottom, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#616161', endColorstr='#393939',GradientType=0);
border-radius: 6px;
color: white;
min-width: 100px;
padding: 10px 15px;
text-align: center;
text-decoration: none;
}
它会更快地加载了很多，使网卡呃在不同的DPI设备上。
我会使用带有图像的渐变背景作为不支持渐变的浏览器的备份。图像bg将自动平铺，边框半径将确保圆角。
DEMO http://jsfiddle.net/kevinPHPkevin/hSwJN/16/
#submit {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
display: inline-block;
color: #000;
font-family:'Oswald';
font-size: 20px;
padding: 12px 24px;
border:none;
background:url('http://www.islandpoolnspa.com/More_info_button_background_rot_180.jpg');
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0); /* IE6-9 */
}
我加入了iOS的标签，因为我建立这个专为iOS。 – zooes
你可以使用CSS3吗？确实够好，但如果你添加ios并且你没有特别要求与ios有关的任何事情，可能会产生误导。 – putvande
是的，我可以使用CSS3。 – zooes