0

我试图让一个按钮在活动时变为渐变背景。这些按钮有一个图像+文本。图像从左边距偏移 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 图像。

4

2 回答 2

0

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

background-position: FIRST_IMAGE_POSITION, SECOND_IMAGE_POSITION;

这正是我一直在寻找的： 如何使用偏移而不是线性渐变来定位背景图像

于 2013-10-05T01:49:39.407 回答
0

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

.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

于 2013-10-05T01:07:14.833 回答