Html opacity:0 与visibility:hidden 的效果完全一样吗

Does opacity:0 have exactly the same effect as visibility:hidden

提问by Chris Noe

If so, does it effectively deprecate the visibilityproperty?

如果是这样，它是否有效地弃用了该visibility属性？

(I realize that Internet Explorer does not yet support this CSS2 property.)
Comparisons of layout engines

（我意识到 Internet Explorer 尚不支持此 CSS2 属性。）
布局引擎的比较

See also: What is the difference between visibility:hidden and display:none

另请参阅：visibility:hidden 和 display:none 之间的区别是什么

回答by Chris Noe

Here is a compilation of verified information from the various answers.

这是来自各种答案的经过验证的信息的汇编。

Each of these CSS properties is in fact unique. In addition to rendering an element not visible, they have the following additional effect(s):

这些 CSS 属性中的每一个实际上都是独一无二的。除了使元素不可见之外，它们还具有以下附加效果：

1. Collapsesthe space that the element would normally occupy
2. Responds to events(e.g., click, keypress)
3. Participates in the taborder

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.

回答by Kornel

No.

不。

Elements with opacity create new stacking context.

具有不透明度的元素创建新的堆叠上下文。

Also, CSS spec doesn't define this, but elements with opacity:0are clickable, and elements with visibility:hiddenare not.

此外，CSS 规范没有定义这一点，但带有opacity:0可点击的元素，而带有不可点击的元素visibility:hidden。

回答by Nishant

No it does not. There is a big difference. They are similar because you can see through the element if visibility is hidden or opacity is 0, however

不，不是的。有一个很大的不同。它们是相似的，因为如果可见性被隐藏或不透明度为 0，您可以透过元素看到，但是

opacity: 0: you can not clickon elements behind it.

opacity: 0:你不能点击它后面的元素。

visibility: hidden: you can clickon elements behind it.

可见性：隐藏：你可以点击它后面的元素。

回答by Mr Lister

There are many differences between visibilityand opacity. Most of the answers mention some differences, but here is a complete list.

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

1. opacity does not inherit, while visibility does

2. opacity is animatable while visibility is not.
   (Well, technicallyit is, but there is simply no behaviour defined for, say, "37% collapsed and 63% hidden", so you can consider this as non-animatable.)

3. Using opacity, you can not make a child element more opaque than its parent. E.G. if you have a p with color:black and opacity:0.5, you can not make any of its children fully black. Valid values for opacity are between 0 and 1, and this example would require 2!
   Consequently, according to Martin's comment, you can have a visible child (with visibility:visible) in an invisible parent (with visibility:hidden). This is impossible with opacity; if a parent has opacity:0; its children are always invisible.

4. Kornel's answermentions that opacity values less than 1 create their own stacking context; no value for visibility does.
   (I wish I could think of a way to demonstrate this, but I can't think of any means to show the stacking context of a visibility:hidden element.)

5. According to philnash's answer, elements with opacity:0 are still read by screen readers, while visible:hidden elements are not.

6. According to Chris Noe's answer, visibility has more options (such as collapse) and elements that are not visible no longer respond to clicks and cannot be tabbed to.

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

2. 不透明度是可动画的，而可见性不是。
   （好吧，从技术上讲是这样，但根本没有为“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 的回答，可见性有更多选项（例如折叠），并且不可见的元素不再响应点击并且不能被标签化。

(Making this a community wiki, since borrowing from the existing answers wouldn't be fair otherwise.)

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

回答by Andrew Bullock

Im not sure entirely, but this is how i do cross browser transparency:

我不完全确定，但这就是我做跨浏览器透明度的方式：

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

objects with Visibility:hidden still have shape, they just arent visible. opacity zero elements can still be clicked and react to other events.

具有 Visibility:hidden 的对象仍然具有形状，它们只是不可见。仍然可以单击不透明度零元素并对其他事件做出反应。

回答by philnash

I'm not entirely sure of this, but I think screen readers don't read things that are set to visibility hidden, but they may read things regardless of their opacity.

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

That's the only difference I can think of.

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

回答by MalcolmOcean

While making a userstyle that affects elements in a contenteditable, I noticed that if you set something to visibility: hidden, then the input caret doesn't really want to interact with it. Eg if you have

在制作影响 a 中元素的用户样式时contenteditable，我注意到如果您将某些内容设置为visibility: hidden，那么输入插入符号并不真正想要与之交互。例如，如果你有

<div contenteditable><span style='visibility: hidden;'></span></div>

...then it seems if you focus that div/span, you can't actually type in it. Whereas with opacity: 0it seems you can. I haven't tested this extensively, but figured it was worth mentioning this here as nobody else on this page has talked about the effects on text input. This seems possibly related to the eventsstuff mentioned above though.

...然后似乎如果您关注该 div/span，您实际上无法输入它。而有了opacity: 0它似乎你可以。我没有对此进行过广泛的测试，但我认为值得在此提及这一点，因为此页面上没有其他人讨论过对文本输入的影响。不过，这似乎可能与上面提到的事件有关。

回答by Zack The Human

The properties have different semanticmeanings. While semantic CSS sounds like it may be silly, as other users have mentioned it has an impact on devices like screen readers -- where semantics impact the accessibility of a page.

这些属性具有不同的语义含义。虽然语义 CSS 听起来可能很愚蠢，但正如其他用户所提到的，它对屏幕阅读器等设备有影响——语义影响页面的可访问性。

回答by Diodeus - James MacFarlane

What Phil says is true.

菲尔说的是真的。

IE supports opacity though:

IE 支持不透明度：

filter:alpha(opacity=0);