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