我有以下的CSS：切換背景圖像的寬度

#section-one { 
    background: url('http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-pointers.jpg'); 
    background-size: 100%; 
    background-repeat: no-repeat; 
} 


@media all and (max-width: 800px) { 
    #section-one { 
     background: url('http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg') !important; 
    } 
}

現在我期待這個改變背景圖像時，瀏覽器的寬度是< = 800像素

沒有什麼實際改變，雖然，但是如果我在瀏覽器寬度低於800像素時右擊並查看圖像，它實際上會顯示800像素寬的圖像？

奇怪，爲什麼會出現這種情況，如何解決？這裏是鏈接如果你需要它：

http://176.67.174.179/ukcctvinstallations.co.uk

其他唯一的CSS我有＃節，我有是： -

@media all and (max-width: 880px) { 
    /* Section 1 */ 
    #section-one { 
     margin-bottom: -49px !important; 
    } 
}

來源

2014-09-21 nsilva

還有什麼控制呢？我的意思是，在你的CSS代碼或元素上休息的地方，也許你直接添加的寬度吧...請包括代碼，添加鏈接可能不幫助別人，將來參觀這個問題爲紐帶，可以取下來或不可用...... – webeno 2014-09-21 10:11:01

我收到了404，當我訪問http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-800px.jpg。沒有出現改變的真正原因，不過，是因爲你有一個元素指向相同的圖像作爲覆蓋＃部分，一個區域的第一個CSS規則。 – BoltClock 2014-09-21 10:18:18

http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg - 仍然是相同的 – nsilva 2014-09-21 10:19:36

您可以在屏幕的標準尺寸創建圖片像section-one.jpg (1440x900)然後使用此代碼爲您#section-one：

＃部分一{

min-width:974px; 
min-height:510px; 
background:url(section-one.jpg) no-repeat bottom center fixed transparent; 
-webkit-background-size:cover; 
-moz-background-size:cover; 
-o-background-size:cover; 
background-size:cover; 
height:100%; 
width:100%; 
image-rendering:optimizeSpeed

}

來源

2014-09-21 13:10:52

Please try this code 

@media only screen 
and (max-width :800px) { 

#section-one{ 

background: url(section-one.jpg) no-repeat center center fixed; 

-webkit-background-size: cover; 

-moz-background-size: cover; 

-o-background-size: cover; 

background-size: cover; 

width:100%; 

height:100%; 
} 
}

來源

2014-09-21 20:29:17 Deepti

切換背景圖像的寬度

回答

＃部分一{

}

相關問題