在较小的屏幕上隐藏背景图像

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;
    }
}