带有背景图像的元素不可见

Question

我对纯标记的Web开发还比较陌生。 我已经尝试过很多次了，但是我通常都不会越过早期阶段，因为我在语法上犯了一个小错误，并且永远都找不到答案。 这就是这种情况之一。

我什至无法获得一个div来显示其在css中定义的样式。 如果有人可以很快指出div ID #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

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

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

JSFiddle演示

Answer 2

您需要为.hero_container和#hero_intro div的width属性提供单位度量。

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

#bg_cityscape为#bg_cityscape添加一个height值（无论您需要多大）。

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

Answer 3

这对我有用。 “边界”线仅用于显示区域。

<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演示

带有背景图像的元素不可见

问题描述

4 个解决方案

解决方案1
3 2015-05-20 00:28:13

解决方案2
1 2015-05-20 00:33:53

解决方案3
1 2015-05-20 00:34:11

解决方案4
1 2015-05-20 00:34:21

带有背景图像的元素不可见

问题描述

4 个解决方案

解决方案1 3 2015-05-20 00:28:13

解决方案2 1 2015-05-20 00:33:53

解决方案3 1 2015-05-20 00:34:11

解决方案4 1 2015-05-20 00:34:21

解决方案1
3 2015-05-20 00:28:13

解决方案2
1 2015-05-20 00:33:53

解决方案3
1 2015-05-20 00:34:11

解决方案4
1 2015-05-20 00:34:21