如何設置全角和自適應的背景圖像

Question

我試圖設置背景圖像並將其設置為完整，但是我只能看到它居中。

 .wrapper-hero { width: 100%; height: auto; max-width: 1920px; } .wrapper-hero .hero-image { background: url('@{baseDir}images/hero-image.png') no-repeat top center; background-size: contain; background-repeat: no-repeat; display: block; background-size: cover; height: 800px; width: 1200px; } 

 <div class="wrapper-hero"> <div class="hero-image"></div> </div> 

有任何想法嗎？ 而且圖像根本沒有響應...

Answer 1

您多次使用background-size 。 試試這個代碼。

 .hero-image { background: url('@{baseDir}images/hero-image.png') no-repeat center center fixed; width: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }