Question

我有一个背景图片，我想在屏幕尺寸变化时更改。显然，每当我使用媒体查询时，它会将我的背景图像覆盖到我在其上输入的颜色。这项工作或两者都必须成像吗？谢谢。

{{1}}

Answer 1

媒体查询不是“覆盖”＆＃39;您以前制作的样式，事实上您使用的是简写background样式。

在大多数情况下，这会覆盖之前设置的所有background-*样式，其中包含background-image样式。

相反，如何：

@media (min-width: 480px) {
    #home {
        background-color: #fcb595;
    }
}

注意：除非背景图像有透明部分，否则此样式是多余的，因为背景图像无论如何都会覆盖背景颜色。

Answer 2

根据你的问题，答案是否有效，并非两者都必须是图像。

您的代码运行正常。但我认为您对max-width和min-width感到困惑。你的代码很好用。 Working Fiddle

Html：

<div id= "home">

</div>

Css：

#home {
padding-top: 35px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTupAbxBl02rU1nM9ZA0OLBlsDKmoAoOlhCfUdP0XDeFLj8q1Ec");
background-size: cover;
height: 100vh;
width: 100%;
}

@media (min-width: 480px) {
#home {
    background: #fcb595;
}
}

媒体查询会覆盖背景图像

2 个答案: