将填充添加到具有背景图像的HTML锚点

Question

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

问题是，由于我使用的是背景，因此边距会使图像在整个区域内平铺，并且不会增加可点击区域。

有没有办法在锚点上使用填充并保持10x10px背景？

<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;
    }