覆盖html/css中的图像
覆盖html/css中的图像
提问于 2018-05-30 12:48:55
我有一个网站，其中移动视图我想要不同的图像和桌面视图，我想另一个。
对于桌面视图，以下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;
}
}回答 4
Stack Overflow用户
发布于 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
Stack Overflow用户
发布于 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;
}
}Stack Overflow用户
发布于 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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50596577
复制相关文章
相似问题
腾讯云开发者
