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

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

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

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

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

一切都很好，但手机看起来不太舒服，所以我尝试在css中添加不同的背景图像url，但运气不佳，如下所示：

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

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

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

---

我只想知道我缺少了哪一部分，以及为什么我不能有两个不同分辨率的不同图像

您遇到了这个问题，因为内联css覆盖了内部/外部css，请参阅。 将代码更改为

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

---

thr div中的

style

属性优先于CSS属性，因此这可能就是第二个图像不会出现的原因。最好在CSS中完成这一切。检查下面的示例

.sec{
//可以忽略高度和宽度
宽度：100vw；
高度：100vh；
背景重复：无重复；
背景尺寸：封面；
背景图像：url（'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
}
@仅介质屏幕和（最大宽度：400px）{
秒{
背景图像：url（'https://fsb.zobj.net/crop.php?r=TQ17OTvRvqIRq6m-kcLMlU-g68IHkNtXYQ5B3j9twk_CkS6zM7rH_C-OzOS4iVM6pDE9P2fHuo3Swz1_QVGWT7GraixZDBY0x7RRCTFROFHSC7AAU-HbAFN7i6SGowXNJmowCJGeoUz5S-Uj16rIKacUVpvxTXLR4YhxW2NK BXHJERHMF1O7LD4K'）；
}
}

---

您也可以用同样的方法添加

背景图像：url（/img/1255.jpg）！重要信息

在移动设备中。

谢谢，伙计，它工作得很好。这台工作得很好，谢谢你的欢迎@JeffHanneman！如果它对你有帮助，你可以考虑投票和/或标记这个答案。