Question

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

你错过了一个＆gt;来自你的主播：

<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

如何在背景图像的中间左侧放置按钮？

1 个答案: