更改根據屏幕不同的背景圖片： - CSS HTML5畫廊

Question

概念很簡單，我有一個HTML5的頁面，它是反應靈敏，只是bground影像不與屏幕尺寸的改變：現在的代碼是：

<div id="home-gallery" class="gallery-container fullscreen"> 
<section id="home-welcome" class="slide-1 gallery-slide background-cover" style="background-image:url(static/img/home/image1.jpg)"> 
..... 

<section id="home-campaigns" class="slide-2 gallery-slide background-cover" style="background-image:url(static/img/home/image2.jpg)"> 

這就是說它使用一個共同的圖像。我試圖做的CSS是：

@media (min-width:800px) { background-image: url(bg-800.jpg) } 
@media (min-width:1024px) { background-image: url(bg-1024.jpg) } 
@media (min-width:1280px) { background-image: url(bg-1280.jpg) } 

但我不知道如何style="background-image:屬性關聯到CSS代碼？我應該寫：

<section id="home-campaigns" class="slide-2 gallery-slide background-cover" style="background-image"> 

，並在CSS #home-welcome background-image @media (min-width:800px) { background-image: url(bg-1024.jpg) } @media (min-width:1024px) { background-image: url(bg-1024.jpg) } @media (min-width:1280px) { background-image: url(bg-1280.jpg) }

請幫助。我試過了。 `

Answer 1

@media (min-width:800px) { 
#home-welcome{ 
background-image: url(bg-800.jpg); 
} 
} 
@media (min-width:1024px) { 
#home-welcome{ 
background-image: url(bg-1024.jpg); 
} 
} 
@media (min-width:1280px) { 
#home-welcome{ 
background-image: url(bg-1280.jpg); 
} 
} 

這將根據屏幕大小設置home-welcome div的背景圖像。

雖然使用最小寬度，所有三個規則都會匹配。您應該使用最大寬度。

編輯：我把我的聲明關於最大寬度回來。取決於你想達到的目標。請記住，當多個規則匹配並且最後聲明的規則獲勝時，CSS會規則級聯。使用！重要的是明智的。

相應的HTML

<section id="home-welcome" class="slide-2 gallery-slide background-cover"> 

還要檢查這個http://www.w3schools.com/cssref/css3_pr_background-size.asp

您可以使用background-size:contain，使圖像適合div容器。