html - 如何将按钮放置在背景图像的左中角？

Question

这是我的按钮：http: //jsfiddle.net/cRqhT/120/

HTML：

<a id="button" href="http://example.com"</a>

CSS：

#button{
  display: block;
    width: 121px;
    height: 40px;
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/1.png) no-repeat top;
}
#button:hover {
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/2.png) no-repeat bottom;
    }

这是背景：http ://b.dryicons.com/files/graphics_previews/shining_background.jpg

如何将按钮放在左中角的背景上？

Answer 1

您的锚点缺少 > ：

<a id="button" href="http://mysite.com"></a>

一种解决方案是将您的锚放在具有该背景的容器中并绝对定位锚：

<div>
    <a ... ></a>
</div>


.div { position:relative; background:transparent url('myUrl.png') no-repeat; }
a { position:absolute; top:XXpx; left:0; }

其中分隔线与背景图像具有相同的高度和宽度，并且XXpx等于从图像高度中减去锚点的高度，再除以 2。

JSFiddle 示例。