我正在尝试让一个按钮在激活时变为渐变背景。按钮有图像+文本。图像从左边距偏移 5px。问题在于，当激活状态被调用时，5px 填充被排除在渐变之外。
这是我的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Button Testing</title>
<style>
.controls {
display: inline;
margin-left: 10px;
}
.button {
padding: 5px 5px 5px 25px;
border: 2px solid #666666;
color: #000000;
text-decoration: none;
/* background: #dcdcdc url(static/16x16/arrow-black.gif) no-repeat scroll 5px center; */
background: rgba(230, 230, 230, 0.75) url(static/16x16/arrow-black.gif) no-repeat scroll 5px center;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.button:hover, .button:focus {
background: rgba(200, 200, 200, 1.0) url(static/16x16/arrow-color.png) no-repeat scroll 5px center;
border: 2px solid #3013ED;
}
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 5px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
</style>
</head>
<body>
<button id="scale-button" class="controls button">Scale it</button>
</body>
</html>
按钮在正常状态下看起来像这样:
当我悬停时它很好，看起来像这样:
但是当它处于事件状态时，我最终会从渐变背景中排除填充。
有没有什么方法可以调整填充，使渐变背景不排除最左边的像素？如果我必须调整图像以便不需要填充，我可以这样做，但我希望有更好的方法。
这是箭头的两个图像:
, 
.它们都是 16x16 图像。
最佳答案
如果您按以下方式更改代码，它将删除该偏移量。变化:
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 5px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
为此:
.button:active {
background: rgba(159, 245, 245, 1.0) no-repeat scroll 0px center;
background-image: url('static/16x16/arrow-color.png'), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #00A3EF 100%);
border: 2px solid #3013ED;
}
我所做的唯一更改是将 background 声明从 5px 更改为 0px
关于image - 在填充上有渐变背景封面按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19192869/