我有一个网站,其中移动视图我想要不同的图像和桌面视图,我想另一个。
对于桌面视图,以下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;
}
}
发布于 2018-05-30 12:56:46
您想要更改.et_pb_section.et_pb_section_0
img,以便在media-query
中使用:
https请参阅jsFiddle:: 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
发布于 2018-05-30 12:53:09
@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;
}
}
发布于 2018-05-30 12:54:42
这是因为你在媒体查询之外使用了更多的细节。尝试:
@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;
}
}
https://stackoverflow.com/questions/50596577
复制相似问题