div的颜色悬停在背景图像上

Question

说明

我正在尝试制作一些按钮。 我在div上有一个背景图片，该图片的某些部分是透明的。 背景图像是一个圆圈。 当用户将鼠标悬停在该div上时，它会通过透明部分将背景更改为紫色。 div为80px x 80px。 与背景图片相同。 div的半径为100px；

问题

当用户将鼠标悬停在div上方时，背景图像外部会显示一小部分紫色。

如何阻止这种情况的发生？

HTML代码

<div id='Menu'>
<div onclick="gotoPage('HomePage')" class='MenuItem' id='home'>
    Home
</div>
<div onclick="gotoPage('AboutUsPage')" class='MenuItem' id='team'>
    About Us
    </div>
</div>

CSS代码

#Menu
{
    width: 80px;
}
.MenuItem
{
    font-family: 'Share Tech', bold, sans-serif;
    background-image: url(../images/button.png);
    color: rgb(51, 0, 102);
    text-align: center;
    vertical-align: center;
    margin-top: 25px;
    border-radius: 999px;
    width: 80px;
    height: 80px;
    line-height: 80px;
}
.MenuItem:hover
{
    background-color: rgba(51, 0, 102, 1);
    color: darkgray;
    cursor: pointer;
    /**position: relative;
    top: -5px;
    left: -5px;
    margin-bottom: -20px;**/
}

示例页面

Answer 1

按钮的重叠图像不是完整的80 x 80；而是

我更改了小提琴中的背景位置以进行补偿，但是现在悬停颜色流到了底部。

您需要修复图像本身或更改按钮的整体大小，这在小提琴http://jsfiddle.net/69Jaw/和下面的代码中得到了说明。

border-radius: 78px;
background-position: -2px -1px;
width: 77px;
height: 78px;
line-height: 78px;

Answer 2

假设一切如您所说 ，我只建议您添加此内容以确保bg图像的大小和位置正确：

background-position:center;
background-size:80px 80px;

此外， border-radius应修改为：

border-radius: 50%;

JSFiddle演示