添加填充到具有背景图像的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; 
    }