html - 覆盖 html/css 中的图像

Question

我有一个网站，对于移动视图，我想要不同的图像，而对于桌面视图，我想要另一个。

对于桌面视图，以下 HTML/CSS 代码运行良好：

HTML：

<div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et_section_regular">
</div>

CSS：

div.et_pb_section.et_pb_section_0 {
    background-image: url(/wp-content/uploads/2018/05/contactusheader-2-min.jpg)!important;
}

我现在要为移动视图实现什么，我希望调用以下 CSS，但我不确定为什么在移动视图中没有调用以下背景图像。

@media only screen and (max-width: 767px)
{
.demo-request-backgroundimage
{
background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
}
}

标签： htmlcssmedia-queries

Answer 1

你想改变.et_pb_section.et_pb_section_0img 所以在media-query使用中：
见 jsFiddle:https: https://jsfiddle.net/smuf3c3t/

.et_pb_section.et_pb_section_0 {
    background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)!important;
    width:500px;
    height:500px;
}




@media only screen and (max-width: 767px)
{
.et_pb_section.et_pb_section_0
{
background-image: url(https://material.angular.io/assets/img/examples/shiba2.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
}
}

<div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et_section_regular">
</div>

编辑从您的网站发表评论：

看看我调整大小时发生了什么：

所以删除 !IMPORTANT