javascript - 屏幕上的完整横幅宽度

Question

我有一个使用图像作为背景的横幅。图片尺寸为 670*303。有没有办法将横幅（图像）拉伸到屏幕的全宽。

演示位于http://jsfiddle.net/zhshqzyc/xGQtF/2/

而且，还有额外的颜色（背景颜色：#808000）

下面的banner，怎么去掉？

谢谢。

Answer 1

background-size: 100% 应该做的伎俩。

在这里，http://jsfiddle.net/xGQtF/6/

Answer 2

如果它是可以重复的渐变或图案，您可以使用

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 上。

尽管它可能会在不将 body padding 设置为 0px 的情况下拉伸到整个宽度，但如果未设置 body padding，某些浏览器会自动提供它，因此它会抵消那些设置。

如果您使用的图像具有弯曲的边缘和顶点等，这不适合您，您只想拉伸它（我个人认为在 99% 的详细图像上看起来不会很好），您可以使用：

background-size:100%;

希望我有帮助 =)