css - 如何在移动设备上隐藏背景图像(SP Page Builder)

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 强制背景图像为 none

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