html - 向具有背景图像的 HTML 锚添加填充

Question

我有一个如下的基本锚点，我希望背景为 10x10px，但重要的是，我希望在图像周围有 1em 的填充而不是边距，以便在移动设备上它是可点击的。

问题是，当我使用背景时，边距使图像在整个区域上平铺并且不会增加可点击区域。

有没有办法使用填充并在锚点上保持 10x10 像素的背景？

<a id="page_close" href="/course/"></a>

#page_close {
    background-image: url("/images/close.png");
    height: 10px;
    margin: 1em;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    top: 0;
    width: 10px;
}

这是close.png精灵图像：

Answer 1

干得好。

#page_close {
    background-image: url("http://i.stack.imgur.com/sw4qj.png");
    background-position: 0% 0%;
    padding: 3em;
    position: absolute;
    top: 0; right: 0;
    text-indent: -9999px;
    width: 10px; height: 10px;
    background-clip: content-box;
    background-origin: content-box;
}

诀窍是同时使用这两者background-origin并将background-clip背景定位在可点击区域的中间。

演示：http: //jsfiddle.net/MrLister/Xe5sE/1/

Answer 2

#page_close {
    background-image: url("/images/close.png");
    padding: 10px;
    background-size: 100% 100%;
    height: 10px;
    margin: 1em;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    top: 0;
    width: 10px;
}

background-size可能有帮助

希望这可以帮助 ：）

如果不只是这样做：

HTML

<a id="page_close" href="/course/"><img src="images/close.png" class="close"/></a>

CSS

 #page_close {
        height: 10px;
        width: 10px;
        margin: 1em;
        position: absolute;
        right: 0;
        padding: 10px;
        text-indent: -9999px;
        top: 0;
        width: 10px;
    }
    .close {
    width: 10px;
    height: 10px;
    }