隐藏div中的所有内容,包括背景图片

时间:2018-11-15 09:13:55

标签: html css

我有一个包含一些内容的div。我可以使用CSS可见性属性在div中隐藏内容。 css可见性属性仅隐藏内容,而不隐藏base64的背景图像。我现在的挑战是使用div隐藏所有内容,包括base64背景图像。这是尝试

<div class="stl_02a">
			<div class="stl_03a">
//this is the background image
				<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAzAAAAQgCAYAAAA5ebkOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABGuSURBVHhe7dshjh1kGIXhkciRyEoUYQmzDCRLQLACFDtAdgfYBjUK2aBIcATRNIjK6vLfzBCSq+ee9PvO8yQnM7muyZfp/zbTOwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAF7Mz2ePZmZmZmaDR5Gvzh7MzMzMzAYPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA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" alt="" 
				class="stl_04a">
			</div>
			<div class="stl_view">
    <div style="visibility:collapse; background: #fff">
      //..... content here and to hide everything within this div
    </div>
</div>
</div>

如何隐藏以上div中的所有内容是挑战

1 个答案:

答案 0 :(得分:0)

使用visibility:collapse属性代替display:none

此外,从this页读取,visibility:collapse仅适用于表行,行组,列,列组。此值将删除行或列,但不会影响表布局。行或列占用的空间将可用于其他内容。

如果要在其他类型的元素上使用它,则应使用visibility:hidden

编辑:

现在,您已经编辑了帖子,很明显为什么显示“背景”图像,这是因为具有内容的元素和具有背景图像的元素是不相关的。您需要在div上将类别为display:none的{​​{1}}或visibility:hidden