如何将按钮放置在背景图像的左中角？ [关闭]答案

【问题标题】：How to place button at the middle left of background image? [closed]如何将按钮放置在背景图像的左中角？ [关闭]
【发布时间】：2013-02-22 15:10:24
【问题描述】：

这是我的按钮：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

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

【问题讨论】：

这个问题没有显示任何研究工作；不清楚也没有用

标签： html css button background position

【解决方案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 example.

【讨论】：