Question

我目前有这段代码

#navlogo {
    background: url(img/logo.png);
    background-size: 100px;
    display: block;
    height: 98px;
    width: 98px;
    border-radius: 49px;
}

我要添加此代码

#navlogo:hover {
    background:url(img/logoblog.png);
    display: block;
    height: 98px;  /* this doesn't work */
    width: 98px;   /* this doesn't work */
}

原始图像缩小了150x150，出于某种原因看起来比使用98x98更好，特别是在iPhone上。但是，我似乎无法设置：悬停元素的背景大小....它保持原始大小。我知道可以用background-size: 98px 98px;完成，但这也与IE8和更低版本不兼容，CSS3PIE也不包括背景大小。无论如何要做到这一点，还是我必须调整悬停图片的大小？

Answer 1

尝试从定义的100px更改背景大小以包含。如果您在悬停时更改div大小，则背景大小将在该方案中随之更改。

E.G：

#navlogo {
background: url(img/logo.png);
background-size: **contain**;
display: block;
height: 100px;
width: 100px;
border-radius: 49px;
}

#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px;               /*this doesn't work*/
width: 98px;                /*this doesn't work*/
}

我假设这是你在这个例子中的目的，因为你在悬停样式中指定“不起作用”的属性正在重置正常状态样式中存在的相同值。鉴于它们的定义完全相同，没有什么会改变。

修改

如果logoblog图像确实更大，将background-size属性设置为'contains'也可以解决此问题。

设置背景的高度和宽度：悬停元素

1 个答案: