0

我目前有这个代码

#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 上。但是，我似乎无法为 :hover 元素设置背景大小......它保持原来的大小。我知道可以这样做，background-size: 98px 98px;但这也不兼容 IE8 及更低版本，而且 CSS3PIE 也不涵盖背景大小。无论如何要这样做还是我必须调整悬停图片的大小？

4

1 回答 1

1

尝试将背景大小从定义的 100 像素更改为包含。如果您在悬停时更改 div 大小，那么在这种情况下背景大小将随之改变。

例如：

#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 属性设置为 'contain' 也应该可以解决这个问题。

于 2013-03-08T14:41:14.950 回答