屏幕上的完整横幅宽度

时间:2012-07-20 18:43:37

标签: javascript html css

我有一个使用图像作为背景的横幅。图像的大小为670 * 303。有没有办法将横幅(图像)拉伸到屏幕的整个宽度。

演示时间为http://jsfiddle.net/zhshqzyc/xGQtF/2/

此外,还有额外的颜色(背景颜色:#808000)

color

横幅下方,如何删除它?

感谢。

2 个答案:

答案 0 :(得分:2)

background-size: 100%应该可以解决问题。

此处http://jsfiddle.net/xGQtF/6/

答案 1 :(得分:0)

如果是可以重复的渐变或图案,可以使用

background-repeat:repeat-x; 

或者只是将'repeat-x'插入背景css,如

background:url(images/blah.jpeg) repeat-x;

这样你只需要一小部分图像>更小的图像尺寸>更快的加载时间。

去掉你可以使用的图像显示的颜色

background-color:transparent;

另外,如果我怀疑你想让横幅从一侧无缝伸展到另一侧,请务必设置身体样式

padding:0px;
width:100%;

并使用

margin:0px;
width:100%;

在包含背景的div上。

虽然它可以伸展到整个宽度而不将主体填充设置为0px,但是如果没有设置,某些浏览器会自动给出主体填充,因此它会抵消那些填充。

如果您使用的是具有弯曲边缘和顶点等的图像,这对您来说不合适,您只需要拉伸它(我个人认为99%的详细图像看起来不太好)您可以使用:

background-size:100%;

希望我帮助=)