首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >覆盖html/css中的图像

覆盖html/css中的图像
EN

Stack Overflow用户
提问于 2018-05-30 12:48:55
回答 4查看 424关注 0票数 0

我有一个网站,其中移动视图我想要不同的图像和桌面视图,我想另一个。

对于桌面视图,以下HTML/CSS代码可以很好地工作:

HTML:

代码语言:javascript
复制
<div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et_section_regular">
</div>

CSS:

代码语言:javascript
复制
div.et_pb_section.et_pb_section_0 {
    background-image: url(/wp-content/uploads/2018/05/contactusheader-2-min.jpg)!important;
}

我现在试图为移动视图实现的是,我想要调用下面的CSS,但是我不确定为什么在移动视图中没有调用下面的背景图像

代码语言:javascript
复制
@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;
}
}
EN

回答 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/

代码语言:javascript
复制
.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;
}
}
代码语言:javascript
复制
<div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et_section_regular">
</div>

从你的网站编辑评论:

当我调整大小时,看看发生了什么:

,因此删除 !IMPORTANT

票数 1
EN

Stack Overflow用户

发布于 2018-05-30 12:53:09

代码语言:javascript
复制
@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;
    }
}
票数 0
EN

Stack Overflow用户

发布于 2018-05-30 12:54:42

这是因为你在媒体查询之外使用了更多的细节。尝试:

代码语言:javascript
复制
@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;
     }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50596577

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档