隱藏在較小的屏幕上的背景圖像

Question

我有一些大的背景照片，我不想在較小的屏幕，手機等顯示。我想顯示顏色定義爲背景顏色。

的代碼是

#search_container1 { 
position: relative; 
height: 500px; 
background: #4d536d url(../img/slide_hero.jpg) no-repeat center top; 
background-size: cover; 
color:#fff; 
width: 100%; 
display:table; 
z-index:99; 

我已經試過

@media (max-width: 768px) { 
#search_container1 { 
     background-image: none !important; 

    } 
} 

，但沒有工作。

如何才能簡單的方法？

Answer 1

在第一條規則中，您使用了background而不是background-image，但必須使用相同的參數覆蓋它。

所以媒體查​​詢必須使用background參數，也只是無圖像：

@media (max-width: 768px) { 
    #search_container1 { 
     background: #4d536d !important; 
    } 
}