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;**/
}

Example Page

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 Demo

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

2 个答案: