Question

我正在制作导航栏。我早些时候来到这里，得到一些帮助重新组织和编码所述项目。所有看起来都很棒，看起来应该可以工作但是当使用下面的代码而不是每个图像调整大小时，它只显示图像高度的X％和图像宽度的Y％。我无法弄清楚出了什么问题。

CSS：

#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; }

#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }

请参阅how it looks looks on my website了解我的意思。另请参阅my other navbar question.

谢谢。

Answer 1

背景图片不会调整大小。它们以完整尺寸显示，如果容器较小则会被剪裁。

你能做什么：

最佳方法是将图像大小调整为目标大小

一种hackish方法是使用绝对定位的<img>标记作为背景，使用<span>文本作为前景。

<div class="hasBg">
    <img>
    <span>text</span>
<div>

.hasBg{
    position:relative;
}
//will autofit depending on how span stretches the container
.hasBg img{
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.hasBg span{
    position:absolute;
}

原生但新功能是使用新的CSS3 background-size。但这不是跨浏览器afaik

Answer 2

由于您已将其作为背景图像完成，因此宽度和高度属性仅适用于div，而不适用于图像。

您有两种选择。

调整图片大小以适应尺寸
在您的网页上显示您的图片并使用javascript进行悬停效果

CSS'background-image'没有正确调整大小

2 个答案: