Question

我对纯标记的Web开发比较陌生。我已多次尝试跳过，但我通常不会超过早期阶段，因为我在语法中犯了一个小错误，却无法找到它的位置。这是一个这样的情况。

我甚至无法通过div来显示它在css中定义的风格。如果有人能够非常快速地指出div #bg_cityscape没有出现，那么你的小小努力将有助于释放我。

<html lang="en">
<head>
 <meta charset="utf-8">
    <style type="text/css">
    .hero_container{width:960; display: inline-block;}
    #hero_intro{width:960;}
    #bg_cityscape{ width:50%; background-image: url(<!--filepathreoved//-->);}
    #white_bar{background-color: white; width: 30%;}
    #portrait{;}
    #signature{;}
    #whitebar_text{;}
    </style>
</head>
<body>
    <div class="hero_container">
        <div id="bg_cityscape">
        </div>
    </div>
</body>

</html>

编辑解决了!!!!多谢你们！我不确定哪些建议可以做到，但它现在正在运作！在我确定是否在包含div的背景图片上定义固定高度或任何高度后，我会更新帖子;或CSS中容器的测量单位。

Answer 1

您需要为height声明div并添加position：

#bg_cityscape {
    width:50%;
    height:50%;
    position:absolute;
    background-image: url(https://www.google.com/images/srpr/logo11w.png);
}

<强> JSFiddle Demo

Answer 2

您需要为.hero_container和#hero_intro div提供单位衡量标准。宽度属性。

.hero_container{width:960px; display: inline-block;}
#hero_intro{width:960px;}

为height添加#bg_cityscape值（无论你需要多大的值）。

#bg_cityscape{ width:50%; background-image: url(/*image url*/); height: 200px;}

Answer 3

这对我有用。＆＃34;边界＆＃34;线只是为了展示该地区。

<html lang="en">
<head>
 <meta charset="utf-8">
    <style type="text/css">
    .hero_container{width:960; display: inline-block;}
    #hero_intro{width:960;}
    #bg_cityscape{

        border:1px solid #00ff00; /* Show the region */        
        width:50%; 
        background-image: url('http://dreebies.com/wp-content/uploads/2013/05/free-pattern-renaissance-sprin.png');}

    #white_bar{background-color: white; width: 30%;}
    #portrait{;}
    #signature{;}
    #whitebar_text{;}
    </style>
</head>
<body>
    <div class="hero_container">
        <div id="bg_cityscape">
            Test
        </div>
    </div>
</body>

</html>

Answer 4

如果<div id="bg_cityscape"></div>中没有内容，则需要指定高度。

JSFiddle Demo

背景图片不可见的元素

4 个答案: