Opacity 你说清了嘛？

前端

2024-02-07 07:19:32

我是怎么错误的

在字节面试的时候，我被问了一个问题，如何隐藏父元素，但是把子元素显示出来，我当时回答的是 opacity。面试官小姐姐说 opacity 是不可以的。我感觉面试官小姐姐应该是在扯。但当我认真学习之后，我才发现是我错了。

opacity 属性

opacity 属性是 CSS 中的一个属性，用于设置元素的透明度。透明度是指元素允许多少光线通过。透明度值的范围从 0 到 1，其中 0 表示完全透明，1 表示完全不透明。

visibility 属性

visibility 属性是 CSS 中的一个属性，用于设置元素的可见性。可见性是指元素是否在页面上可见。可见性的值可以是 visible 或 hidden，其中 visible 表示元素可见，hidden 表示元素不可见。

所以简单来说：

opacity: 0 表示元素完全透明，但仍然在页面上可见。
visibility: hidden 表示元素不可见，并且在页面上不占据任何空间。

案例演示：

#parent {
  background-color: red;
  width: 100px;
  height: 100px;
}

#child {
  background-color: blue;
  width: 50px;
  height: 50px;
}

如果我们给父元素添加 opacity: 0; 样式，那么父元素就会变得完全透明，但是子元素仍然可见。

#parent {
  background-color: red;
  width: 100px;
  height: 100px;
  opacity: 0;
}

#child {
  background-color: blue;
  width: 50px;
  height: 50px;
}

如果我们给父元素添加 visibility: hidden; 样式，那么父元素和子元素都会变得不可见。

#parent {
  background-color: red;
  width: 100px;
  height: 100px;
  visibility: hidden;
}

#child {
  background-color: blue;
  width: 50px;
  height: 50px;
}