帶有背景圖像的元素不可見

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