不透明度:0与可见性具有完全相同的效果:隐藏

Question

如果是这样,它是否有效地弃用了visibility财产？

(我意识到Internet Explorer还不支持这个CSS2属性.)
布局引擎的比较

另请参见:visibility:hidden和display:none之间的区别

Answer 1

以下是各种答案中经过验证的信息汇编.

这些CSS属性中的每一个实际上都是唯一的.除了渲染元素不可见外,它们还具有以下附加效果:

1. 折叠元素通常占用的空间
2. 响应事件(例如,点击,按键)
3. 参与taborder

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse    *      No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

Answer 2

没有.

不透明度的元素会创建新的堆叠上下文.

此外,CSS规范没有定义这个,但是元素opacity:0是可点击的,而元素visibility:hidden则不是.

Answer 3

不,不是的.有一个很大的不同.它们是相似的,因为如果隐藏可见性或不透明度为0,您可以透视该元素

不透明度:0 :您无法单击其后面的元素.

visibility:hidden:你可以点击它背后的元素.

Answer 4

visibility和之间有很多区别opacity。大多数答案都提到了一些差异，但这里有一个完整的列表。

1. 不透明度不会继承，而可见性会

2. opacity 是可动画的，而visibility 不是。
   （好吧，从技术上讲是这样，但根本没有为“37% 折叠和 63% 隐藏”定义的行为，因此您可以将其视为不可动画。）

3. 使用不透明度，您不能使子元素比其父元素更不透明。EG 如果你有 color:black 和 opacity:0.5 的 ap，你不能让它的任何一个孩子全黑。不透明度的有效值介于 0 和 1 之间，本示例需要 2！
   因此，根据Martin 的评论，您可以在不可见的父级（可见性：隐藏）中有一个可见的子级（可见性：可见）。这在不透明的情况下是不可能的；如果父级具有不透明度：0；它的孩子总是隐形的。

4. Kornel 的回答提到小于 1 的不透明度值会创建自己的堆叠上下文；可见性没有价值。
   （我希望我能想出一种方法来证明这一点，但我想不出任何方法来显示可见性：隐藏元素的堆叠上下文。）

5. 根据philnash 的回答，屏幕阅读器仍会读取 opacity:0 的元素，而 visible:hidden 元素则不会。

6. 根据Chris Noe 的回答，可见性有更多选项（例如折叠），并且不可见的元素不再响应点击并且不能被标签化。

（使其成为社区维基，因为从现有答案中借用否则将不公平。）

Answer 5

我不完全确定这一点，但我认为屏幕阅读器不会阅读设置为可见性隐藏的内容，但无论其不透明度如何，他们都可以阅读。

这是我能想到的唯一区别。