隐藏 DIV 背景图像而不包含其余内容答案

【问题标题】：Hide DIV background-image without rest of content隐藏 DIV 背景图像而不包含其余内容
【发布时间】：2017-01-05 07:58:58
【问题描述】：

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

我尝试了可见性：隐藏和背景图像：无，但在这两种情况下，文本也会消失。

有没有办法不让其他 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;
}

非常感谢！ :)

【问题讨论】：

请显示您的 div 代码并显示您的 css。
如果你想让某些东西只在尺寸大于...时显示。你需要使用 min-width

标签： html css

【解决方案1】：

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

试试：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：