Question

我正在尝试使用一个在激活时更改为渐变背景的按钮。按钮有图像+文本。图像偏离左边距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>

按钮在正常状态下看起来像这样：

normal

当我悬停它很好，看起来像这样：

hover

但是当它处于活动状态时，我最终会从渐变背景中排除填充。

active

有没有办法调整填充，以便渐变背景不排除最左边的像素？如果我必须调整图像以便不需要填充，我可以这样做，但我希望有更好的方法。

以下是箭头的两个图像： black ， color 。它们都是16x16图像。

Answer 1

如果以下列方式更改代码，它将删除该偏移量。变化：

.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

的声明

Answer 2

我最终在stackoverflow上找到了答案。我是重复的。关键答案是可以存在多个背景位置规范，这些规范对应于多个背景图像。不要复制整个帖子，但是：

background-position: FIRST_IMAGE_POSITION, SECOND_IMAGE_POSITION;

这正是我所寻找的： How to position a background-image using an offset but not the linear gradient

横跨填充渐变背景覆盖按钮

2 个答案: