隐藏DIV背景图片而不使用其他内容

Question

所以我的用例是我有一个带有大背景图像的div和一些带有文本的div。在我的css文件中，我有一个最大宽度的媒体查询，因此低于该宽度的图像应该消失。

我尝试了两种可见性：hidden和background-image：none，但在这两种情况下，文本也会消失。

有没有办法不让其他div消失？或者构建这种结构以实现上述目标的另一种方法是什么？

HTML：

<div id="teaser">
    <span id="teaser-text"> Text </span>
    <div id="attributes">   Some Text</div>
</div>

CSS：

#teaser {
    width: 100%;
    height: 0;
    padding-top: 66.44%;
    background-image: url('/static/main/freude2_bright1.jpg');
    background-size: contain;
    position: relative;
    color: white;
    margin-bottom: 20px;
}

非常感谢！ ：）

Answer 1

#teaser在白色背景上吗？如果是这样，您的文字可能不会消失，但在您删除图片后可能会显示为白色。

尝试：

@media all and (max-width:480px) {
  #teaser {
    background-image: none;
    color: #000;
  }
}

Answer 2

如果我理解正确你想删除div的背景图像（或颜色？）但不影响其中的其他内容？

.main-div {
  background-color: none;
  background-image: none;
}