html - CSS 'background-image' 未正确调整大小

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

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

你可以做什么:

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

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