如何为手机上的同一部分设置不同的图像背景

Question

我在一个网页网站上工作，我使用一个div为所有部分设置一个背景图像，如下所示:

<div style="background-image: url(./img/12.jpg)" class="sec">
</div>

在CSS中我的代码如下:

.sec{
background-repeat: no-repeat;
background-size:cover;
}

一切都很好，但手机看起来不太愉快，所以我试着在我的CSS中添加不同的背景图像url，没有像下面这样的运气:

@media only screen and (max-width: 600px) {
.sec{
background-repeat: no-repeat;
background-size:cover;
background-image: url(/img/1255.jpg);
}
}

我只是想知道我错过了哪一部分，为什么我不能为不同的分辨率有两个不同的图像

Answer 1

你遇到这个问题是因为内联css覆盖内部/外部css，见这里。将代码更改为

<div class="sec">
</div>

和

.sec{
background-repeat: no-repeat;
background-size:cover;
background-image: url(./img/12.jpg)
}
@media only screen and (max-width: 600px) {
.sec{
background-repeat: no-repeat;
background-size:cover;
background-image: url(/img/1255.jpg);
}
}

Answer 2

div中的style属性优先于CSS属性，所以可能这就是为什么第二张图像不会出现的原因。最好都用CSS来做。查看下面的示例。

.sec {
// You can ignore the height and width
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
}
@media only screen and (max-width: 400px) {
.sec {
background-image: url('https://fsb.zobj.net/crop.php?r=TQ17OTvRvqIRq6m-kcLMlU-g68IHkNtXYQ5B3j9twk_CkS6zM7rH_C-OzOS4iVM6pDE9P2fHuo3Swz1_qVGWT7gRAIxzDby0x7rrCtfroFsHSC7aau-HbAFN7i6SGowXNJmowCJGeoUz5S-Uj16rIKacUVpvxTXLR4YhxW2NK_BXHJErHMF1oh7lD4k');
}
}

<div class="sec"></div>

Answer 3

您也可以这样做，只需在移动设备中添加background-image: url(/img/1255.jpg)!important。