圖像不作爲背景圖像顯示

有人可以解釋爲什麼我的圖像沒有顯示在我的測試網頁上嗎？我是否必須在div上設置高度/寬度才能顯示完整圖像？圖像不作爲背景圖像顯示

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 

 
.row div { 
 
    background:blue 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <div style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <div style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <div style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div> 
 
     </div> 
 
    </div> 
 
</div> <!-- /container -->

來源

2016-02-12 michaelmcgurk

您需要設置元素的高度，因爲如果div爲空，高度將爲0. – jcubic

您必須設置min-height：500px或其他。並設置高度：auto; –

感謝您的回覆。藉助Bootstrap，你會如何建議我設置高度。我應該把它設置爲480然後改變每個斷點？或者有沒有這樣做的標準方式？謝謝 – michaelmcgurk

首先必須設置高度和elemenets的寬度和顯示塊

<div class="container"> 

    <div class="row"> 

     <div class="col-md-6"> 

     <div class="img" style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div> 

     </div> 

     <div class="col-md-6"> 

     <div class="img" style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div> 

     </div> 

     <div class="col-md-6"> 

     <div class="img" style="background:url('http://placehold.it/480x480') 0 0 no-repeat"></div> 

     </div> 

    </div> 

</div> <!-- /container --> 


//css 

.img{ 
    width: 480px; 
    height: 480px; 
    display: block; 
}

來源

2016-02-12 16:05:10

導航到http://placehold.it/480x480，它是一個圖像 –

Divs顯示設置爲默認阻止。 – jcubic

給的div一個特定的高度，如height: 500px;或height: 100vh; < - （填充視口的大小），它們將顯示背景圖像。如果div不包含任何內容，則div的高度爲0，因爲背景圖像不會影響div的高度。

如果您將帶有填充文本的<p>標籤放在標籤上，並且不指定高度，您會看到div只與內容一樣高。

來源

2016-02-12 16:12:41 noimdoesnt

圖像不作爲背景圖像顯示

回答

相關問題