使用CSS隐藏HTML元素的几种常用方法

作者：吴志春

​CSS隐藏HTML元素是工作中最常碰到的，同时也是笔试 or 面试中会被问到的问题，故在本文整理了四种CSS隐藏HTML元素，以供参考。

CSS隐藏HTML元素效果

需求：使用两个div标签包裹图片，让图片实现隐藏效果

代码如下

<div class="bg">
  <div>图片之前</div>
   <img src="logo.jpg" alt="天天学前端" title="天天学前端">
   <div>图片之后</div>
</div>

.bg {
  width: 100px;
  height: 120px;
  text-align: center;
  background-color: aquamarine;
}

隐藏之前如图

 

隐藏图片的代码实现方式

1、 visibility: hidden

• 设置img为属性 visibility 为hidden

代码如下：

img {
  visibility: hidden;
}

效果：

 

解读：

1. CSS属性 visibility 显示或隐藏元素而不更改文档的布局

2. 也就是说如上图所示，图片不见了，但是原来图片的位置留下了一片空白区域。这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在

1. 设置visibility: visible可以使隐藏的元素变为可见

2. visibility 为hidden使用隐藏效果是开发中实现隐藏效果的首选方法

注意点：

设置visibility：hidden，隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。

2、opacity: 0

• 设置img为属性 opacity: 0

代码如下：

img {
  opacity: 0;
}

效果如下：

解读：

1. opacity属性指定了一个元素的不透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度

2. 当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值

1. 设置opacity:1可以使透明元素变得可见

2. opacity属性值<number>是一个0.0到1.0范围内的数字值,这个数值既包含也代表通道的透明度，也就是alpha通道的值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值

值	释义
0	元素完全透明 (即元素不可见).
任何一个位于0.0-1.0之间的 <number>	元素半透明 (即元素后面的背景可见).
1	元素完全不透明(即元素后面的背景不可见).

优势

设置opacity: 0可以使一个元素变得完全透明，从而制作出和visibility: hidden一样的效果。opacity和visibility相比，其优势在于它可以被transition和animate。通常可以使用opacity属性来制作元素的淡入淡出效果。

3、position: absolute

• 设置img属性position：absolute

• 设置img属性left：-1000px

代码如下

img {
  position: absolute;
  left: -1000px;
}

效果如下

 

解读：

1. 是最古老和最标准的做法是设置元素的绝对定位来隐藏元素

2. position设置成absolute，img元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并

3. left设置成-1000px，并给它设置一个很大的left负值定位，使元素定位在可见区域之外

4. 要使元素再次变得可见，可以增大left的值，使元素出现在屏幕上

4、display: none

• 设置img属性为display: none

代码如下

img {
  display: none;
}

效果

 

解读：

1. display 属性可以设置元素的内部和外部显示类型

2. display设置成none，表示关闭元素的显示，使其对布局没有影响(呈现文档时，就好像该元素不存在一样)。所有子代元素的显示也被关闭。

3. 将元素设置为display: block或其它值可以使元素再次可见。

5、scale() 函数

• 设置img为transform: scale(0)

代码如下：

img {
  transform: scale(0);
}

效果如下

 

解读：

1. CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

 

2. scale属性和opacity: 0和visibility: hidden一样，不可见的元素会占用文档的空间

长按二维码关注，一起努力。

 助力寻人启事

  微信公众号回复 加群 一起学习。