HTML:设置4< div& gt;作为背景 [英] HTML: Set 4 <div> as background

问题描述

我有一个布局，这是我的css:

I've got a layout, here's my css:

body {
    background-color: #16193B; /* Old browsers */
    margin: 0;
    padding: 0;
    color: white;
    background-attachment: fixed;
    overflow: hidden; 
}

html {
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
}

#content {
    width: 80%;
    height: 1000px;
    margin: 0 auto;
    background-color: #ADD5F7;
    overflow : hidden;
}


#wrap div{
    height:100%;
    width:100%;
}

#b1 {
    width: 80%;
    height: 1000px;
    margin: 0 auto;
    background-color: #35478C;
    position:relative;
}

#b2 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #4E7AC7;
    position:relative;
}

#b3 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #7FB2F0;
    position:relative;
}

#b4 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #ADD5F7;
    overflow : auto;
    position:relative;
}

在HTML文件的正文中就是这样:

And thats in the body of the HTML-File:

    <div id="b1">

        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="content">

                    </div>
                </div>
            </div>
        </div>

    </div>

这是我的布局，但是它应该只是页面的背景...不幸的是，如果我将文本添加到其他div中，则内容"矩形将覆盖其他文本.我怎样才能解决这个问题?实际上，我想要一个菜单​​栏，它是最顶层的图层"，并覆盖其下的所有内容...

This is my layout, but it should just be the background of the page... Unfortunately if I add text to some other div then "content" the rectangle overlays the others. How can I fix this? Actually I want a menu bar which is the top "layer" and overlays all under it...

推荐答案

好吧，先看看我的jsFiddle-Solution:

Ok, before you look at my jsFiddle-Solution:

1. 请注意，将div用于此类背景并不是一个很好的解决方案.最好是在您的身体标签上使用背景图像，并以背景尺寸拉伸该图像.所有现代浏览器均支持该功能.唯一的问题是IE8及更低版本.

1. Be aware that using divs for such backgrounds is not a beautiful solution. Best would be using a background-image on your body-tag, which you stretch with background-size. It's supported in all modern browsers. The only problem would be IE8 and downwards.

您的CSS一团糟.对具有相似属性的元素进行样式设置时，请使用类代替自己对每个ID进行样式设置.

Your CSS is a mess. When styling elements with similar attributes, use a class instead styling every ID by itself.

我基本上用您的自定义内容创建了一个新的div，并在您的background-div上创建了一个类.我还必须清理您的CSS并删除不必要的语句:

I basically created a new div with your custom content and a class on your background-divs. I also had to clean up your CSS and deleted unnecessary statements:

-> jsFiddle <-

-> jsFiddle <-

HTML:

<div  class="centerIt" id="b1">
    <div  class="centerIt" id="b2">
        <div  class="centerIt" id="b3">
            <div  class="centerIt" id="b4">
                <div id="content"></div>
            </div>
        </div>
    </div>
</div>
<div id="contentContainer">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam excepturi laboriosam illum esse voluptas libero aperiam voluptate omnis dolor odio natus tempore sunt doloribus. Suscipit iure vel totam eius reprehenderit.</div>
</div>

CSS:

.centerIt {
    position: relative;
    margin-left: auto;
    margin-right: auto;    
}

这篇关于HTML:设置4&lt; div&amp; gt;作为背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！