Question

我目前正在使用Joomla开发网站，我正在使用SP Page Builder扩展来构建我的内容页面。我在其中一个内容页面上有一个背景图片，它只是弄乱了网页的移动显示，所以我想在移动设备上隐藏背景图像。我之前使用过这个曾经为我工作过的css代码（在没有SP Page Builder的页面上），但似乎没有用，这里是代码：

@media all and (max-width: 768px) {
section.sppb-section.bg {
background-color: #ffffff;
background-image: none;
}
}

这是带有背景图片的元素的自动生成的HTML代码：

This is a screenshot of page the layout of a row with two columns, somehow this row and columns are constructed using <div></div> tags

是否有解决方案或解决方法。谢谢。

Answer 1

在你的html中你有内联样式强制背景在那里所以你需要使用!important强制背景图像为无

@media all and (max-width: 768px) {
    section.sppb-section.bg {
        background-color: #ffffff  !important;
        background-image: none !important;
    }
}

Answer 2

只需在屏幕上显示背景图像＆gt; 768px，而不是相反。

.bg {
background:#fff;
}
@media screen and (min-width:768px){
.bg {
background-image:url(img.jpg);
}
}

Answer 3

内联CSS始终优先于外部css，这就是你的css代码不能正常工作的原因。尝试在外部css文件中保留内联css样式代码。

Answer 4

看起来bg图像被添加到style属性中，它会覆盖你的css类。你需要用重要的东西装饰你的css。

@media all and (max-width: 768px) {
section.bg {
background-color: #ffffff !important;
background-image: none !important;
}
}

如何在移动设备上隐藏背景图像（SP Page Builder）

4 个答案: