html - 隐藏没有其余内容的 DIV 背景图像

Question

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

我已经尝试了 visibility: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;
  }
}