0

我正在制作导航栏。我早些时候来到这里并得到了一些帮助来重新组织和编码所说的项目。一切看起来都很好，看起来应该可以工作，但是当使用以下代码而不是调整每个图像大小时，它只显示图像高度的 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%; }

请参阅它在我的网站上的外观以了解我的意思。另请参阅我的其他导航栏问题。

谢谢你。

4

2 回答 2

0

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

你可以做什么：

  • 最好的方法是将图像大小调整为目标大小

  • 一种骇人听闻的方法是使用绝对定位的<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

于 2012-05-21T04:41:23.523 回答
0

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

你有两个选择。

  • 调整图像大小以适合尺寸
  • 将您的图像放在页面上并使用 javascript 实现悬停效果
于 2012-05-21T04:43:53.473 回答