创建一个高度固定的菜单栏，但随着浏览器大小的变化而缩小？

Question

我正在尝试创建一个高度固定的菜单栏，但随着CSS中浏览器大小的变化而挤压？

这是我目前的CSS，它只是在PS中创建的菜单栏，大小为1920 X 100，我希望这可以在浏览器大小改变时拉伸整个页面的顶部，并保持高度保持不变;

#bar {  
background:url("/Users/Macbook/Desktop/test website/images/bar.png"); 
height:100px;
}

非常感谢你的帮助

Answer 1

您可以使用属性background-size将容器设为width:100%作为默认div并且背景始终为100％：

#bar {  
  background:url("/Users/Macbook/Desktop/test website/images/bar.png") no-repeat center; 
  height:100px;
  background-size:100% 100%;
}

检查此演示http://jsfiddle.net/RLPbg/。

<子> About compatibility

这里的问题是你的图像被扭曲了。

修改

请记住，您的图像只是一种颜色，您可以使用其他选项，例如：

• 重复背景。

• 线性渐变