html - 在标题中添加无限宽度的背景一些元素

Question

这是一个现场演示:http://baogiadientu.com/demo/fridgevan/
我想要的结果:http://baogiadientu.com/demo/fridgevan/images/demo.png

我想为两个元素(.top-bar 和.nav)添加无限宽度的背景。我试图对 .bgwhite 的背景做同样的事情，但是出现了一个滚动条，这不是我想要的。有没有人对如何在没有滚动条的情况下实现这一目标有任何建议？

这是我的 HTML 结构:

<div class="container">

        <header class="clearfix">
            <div class="bgwhite"></div>
            <div class="logo">
                <img alt="logo" src="images/logo.png">
            </div> <!-- end .logo -->

            <div class="beside-logo">
                <div class="white-spce"></div>
                <div class="top-bar">

                </div> <!-- end .top-bar -->

                <div class="nav">

                </div> <!-- end .nav -->
            </div> <!-- end .beside-logo -->
        </header>

 </div> <!-- end .container -->

Answer 1

我确定我们必须查看 CSS 才能回答这个问题，但我想您有一个链接到该 .html 文档的 .css 文件，对吗？

在这种情况下，只需将背景图像设置为 body 并乱用可用于 background 属性的属性。

body {
   background: url(images/yourbg.jpg) fixed center repeat-x;
}

如果你想设置一个带有一点透明度的白色背景，这样网站的背景仍然从后面出现，试试这个:

.nav {
   background: rgba(255,255,255,0.5);
}

希望这对您有所帮助，这是我从问题中了解到的内容。