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

Answer 1

您要更改.et_pb_section.et_pb_section_0 img，以便media-query使用：
请参阅jsFiddle：https： https://jsfiddle.net/smuf3c3t/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑您网站的评论：

查看调整大小时发生的事情：

删除 !IMPORTANT

Answer 2

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

Answer 3

这是因为您在媒体查询之外使用更多特异性。尝试：

@media only screen and (max-width: 767px) {
    div.et_pb_section.et_pb_section_0 {
        background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
     }
}

Answer 4

尝试使用多个classname

普通Css的一类 和 其他媒体查询