Question

我的一些div有一个奇怪的问题。现在我的div被设置为占据整个屏幕，然后有背景颜色，然后是背景图像。但是，虽然一切都正常显示，但如果我尝试添加任何内容，除了我的背景颜色外，一切都会消失。我之前从未遇到过这个问题，我相信它与我的图像和我的div是如何设置有关。但是我找不到解决方案所以我想知道你们中的任何人是否可以提供帮助！我在下面包含了html和css！

以下是可能有帮助的jsfiddle：http://jsfiddle.net/e7C87/1/红色部分是我试图放置导航栏并且背景图像消失的部分

Html（带有div的区域让我发现所有其他div正确显示）：

<div id="induoIntro" class="divide">
                <div class="graphic" style="background-color:#ff837b">
                    <p id="introGraphic"></p>

                    <nav>
                        <a href="#designers">Designers</a>
                        <a href="#developers">Developers</a>
                        <a href="#directors">Directors</a>              
                    </nav>

                </div>

                <div class="textBody">
                     <p>A rag-tag group of desginers, directors and developers hoping to collaborate with you in an effort to satisfy your endeavours, beautify the web, and enginneer a functional interaction; we'll even guaraantee affordability.</p>   
                </div>
            </div>

            <div id="designers" class="divide">                 
                <div class="graphic" style="background-color:#FFB37B">
                    <p id="designGraphic"></p>
                </div>

                <div class="textBody">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>   
                </div>
            </div>

            <div id="developers" class="divide">
                <div class="graphic" style="background-color:#CEE28F">
                    <p id="devGraphic"></p>
                </div>
                <div class="textBody">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>   
                </div>
            </div>

            <div id="directors" class="divide">
                <div class="graphic" style="background-color:#C195DA">
                    <p id="directGraphic">
                </div>

                <div class="textBody">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>   
                </div>
            </div>

CSS：

.divide {
    height:200%;
}

.graphic {
    display:table; 
    height:50%;
    width:100%;

}

.graphic p {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

#introGraphic {
    background-image: url(../images/WAInduo-02.svg);
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
}

#designGraphic {
    background-image: url(../images/WAdesign-03.svg);
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: center;
}

#devGraphic {
    background-image: url(../images/WAdevelop-04.svg);
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: bottom center;
}

#directGraphic {
    background-image:url(../images/WAdirect-05.svg);
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.textBody {    
    display:table; 
    height:50%;
    width:75%;
    margin:auto;
}

.textBody p {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    font-family: 'Dosis', sans-serif;
    font-size:45px;
    margin:auto;
}

Answer 1

好的，那里有很多不相关的代码。这是一个JSFiddle和与您的问题相关的代码（可能很难确定，但如果可能的话，真的有助于仅提供解决问题所需的必要代码）：的 JSFiddle

HTML：

<div id="header"> </div> <div id="induoIntro" class="divide"> <div class="graphic"> <p>Graphic Test</p> <nav>Test</nav> </div> </div>

CSS：

html, body { height: 100%; } #header { position: absolute; height: 70px; top: 0; width: 100%; background-color: #fff; } .divide { height: 200%; } .graphic { display: table; height: 50%; width: 100%; background: #ff837b; } .graphic p { display: table-cell; vertical-align: middle; text-align: center; }

正如您从JSFiddle中看到的那样，“Graphic Test”的<p>内容正确显示，但<nav>内容却没有。好吧，如果您查看CSS，您会看到任何 <p> 元素是 .graphic 元素的子元素class 有特殊说明，即display: table-cell，vertical-align: middle;和text-align: center;。

然而，<nav>类没有这样的特殊说明。如果您从.graphic p选择器删除这些说明，您会看到“图形测试”也会消失。它在哪里？您可以使用浏览器的内置代码检查器找到它，但我只是告诉您：它正在升级到文档的顶部。

但等等，是不是你的标题在哪里？究竟。您有一个绝对定位的header，这意味着它将从正常文档流中删除，并将放在文档的顶部。因此，实际 <nav> 元素被 header隐藏。为了说明这一点，我们将为您的标题添加一些不透明度，并查看位于其后面的元素：

<强> JSFiddle

现在，如果我们回到你原来提供的JSFiddle并对那里的标题做同样的事情，你会看到： JSFiddle

因此，要解决此问题，您应该获取.graphic p的CSS属性，并将它们复制到新的选择器.graphic nav或类似的东西。希望这可以帮助！： - ）

添加<nav>或任何内容使我的背景图像和我的div dissapear </nav>的内容

1 个答案: