將響應背景圖像設置爲HTML中的div

如何使此背景圖像可見並且響應？（注：我知道我應該單獨使用CSS，但我使用的內容管理系統不會讓我添加單獨的CSS文件..）將響應背景圖像設置爲HTML中的div

如果設置了這樣的代碼，圖像不會顯示：

<div style="width: 100%; height: 100%; background-image:url('................'); 
    background-repeat:no-repeat; background-size:cover;"> 
<div style="float:left; width: 32%; height:100%; display: inline-block;"> 
</div> 
<div style="float:left; width: 32%; height:100%; display: inline-block;"> 
</div> 
<div style="float:left; width: 32%; height:100%; display: inline-block;"> 
</div> 
</div>

而且這樣的，顯示圖像，而不是響應：

<div style="width: 100%; height: 100%; background-image:url('................'); 
    background-repeat:no-repeat; background-size:cover; height:150px;"> 
<div style="float:left; width: 32%; height:100%; display: inline-block;"> 
</div> 
<div style="float:left; width: 32%; height:100%; display: inline-block;"> 
</div> 
<div style="float:left; width: 32%; height:100%; display: inline-block;"> 
</div> 
</div>

非常感謝！

來源

2016-09-08 Patrick K

如果您使用百分比高度，請確保定義父高度。 – AA2992

...並清除浮游物。 –

如何使用background-size作爲包含？在此的jsfiddle它的工作原理 https://jsfiddle.net/8fyLbj6r/

<div style="width: 100%; height: 100%; background-image:url('http://images.firstcovers.com/covers/i/its_easy_if_you_try-5332.jpg'); 
    background-repeat:no-repeat; background-size:contain; height:150px;"> 

</div>

來源

2016-09-08 11:56:55 ssabin

謝謝，這個工程。我需要現在重新調整圖像，但至少可以看到它。謝謝！ –

沒問題，不要忘記標記答案 – ssabin

做 - >添加浮動：左到你的背景圖片第一個div。
Reason->高度％是相對的，在代碼是其與任何其他div.something像0 = 0。

PS的100％櫃面你想你的第一div來進行上述放置無相關而不是在後臺，然後把img標籤放在空div.but然後高度將需要提到px.Try第一種方法。

來源

2016-09-08 12:36:06

將響應背景圖像設置爲HTML中的div

回答

相關問題