opacity:0 是不是与 visibility:hidden 具有完全相同的效果

Posted 2023-02-22

【中文标题】opacity:0 是不是与 visibility:hidden 具有完全相同的效果

【英文标题】：Does opacity:0 have exactly the same effect as visibility:hiddenopacity:0 是否与 visibility:hidden 具有完全相同的效果

【发布时间】：2010-09-21 07:17:24

【问题描述】：

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

（我意识到 Internet Explorer 还不支持这个 CSS2 属性。） Comparisons of layout engines

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

【问题讨论】：

那么taborder怎么样？如果 visible=false 则控件不会获得任何焦点，但如果 opacity 为 0，tab 键是否仍会在控件之间迭代？

看看透明控件如何获得焦点将是一个有趣的测试用例。

我试过了，(FF3)。根据 taborder，具有 opacity:0 的输入元素确实会获得焦点，尽管没有视觉指示。光标刚刚消失。无论您键入什么，都会输入到输入元素的值中。再次按 Tab 键移动到下一个字段。很有趣。

【参考方案1】：

我对此并不完全确定，但我认为屏幕阅读器不会阅读设置为隐藏可见性的内容，但他们可能会阅读不透明的内容。

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

【讨论】：

那会如何影响结果呢？也许就 DOM 中包含的内容而言？我的测试用例表明 Mozilla 并没有抛弃可见性：隐藏元素。

无论 CSS 样式如何，元素都将位于 DOM 中，我的意思是，使用屏幕阅读器软件的盲人用户可能会将 opacity:0 元素中的文本读取给他们，而如果相同则不会元素具有可见性：隐藏。这确实是一个可访问性问题，因为结果不同。

有用的一点，它是设置可见性为隐藏的结果之一，但这只是冰山一角。更具体地说，visibility:hidden 使它（看似）从 dom 中消失，同时仍保持其在页面上的布局。

【参考方案2】：

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

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

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

【讨论】：

有形无形是什么意思？

@chris，表示他们仍然占用页面空间

不透明度用于决定元素如何绘制在背景之上。将 opactiy 设置为 0 时，元素自然会占用空间，但不会绘制任何内容，因为 0% 的元素颜色与 100% 的背景混合，不会出现任何新内容。 hidden 和相似的朋友意味着绘制时跳过元素。

【参考方案3】：

菲尔说的是真的。

IE 支持不透明度：

filter:alpha(opacity=0);

【参考方案4】：

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

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

折叠元素通常占用的空间 响应事件（例如，点击、按键） 参加taborder

折叠事件标签 不透明度：0 否 是 是 可见性：隐藏 否 否 否 可见性：折叠 是* 否 否 显示：无 是 否 否 * 在表格元素内是，否则否。

【讨论】：

我尝试在这里遵循 Markdown 文档：daringfireball.net/projects/markdown/syntax

好的，所以 SO 故意不支持 。所以我把它做成了 ascii。 同样，“opacity: 0”会渲染 Flash 对象，并触发 sprite 的构造函数，但不会使用“visibility: hidden”。如果您的单选框/复选框无法使用visibility:hidden，那么您需要使用opacity: 0 来检测鼠标点击。@ChrisNoe：感谢您的总结。您可能要补充一件事：我刚刚研究了如何使父节点不可见但子节点仍然可见，结果：没有机会可见子节点： opacity:0 或 display:none，但是如果你使用visibility: hidden 你可以让孩子可见 visibility: visible

【参考方案5】：

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

【参考方案6】：

没有。

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

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

【参考方案7】：

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

不透明度：0：你不能点击它后面的元素。

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

【讨论】：

“不，它没有”？这是作为对问题的回答，还是作为对现有答案之一的回应？如果是后者，则应将其作为评论添加到其解决的答案下方。

这是对“不透明度：0 与可见性：隐藏的效果完全相同吗？”的答案....虽然这不是很明显吗？

【参考方案8】：

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

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

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

【参考方案9】：

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

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

不透明度是可动画的，而可见性不是。 （嗯，技术上确实如此，但根本没有为“37% 折叠和 63% 隐藏”定义行为，因此您可以将其视为不可动画。）

使用不透明度，您不能使子元素比其父元素更不透明。例如。如果你有一个颜色：黑色和不透明度：0.5 的 p，你不能让它的任何孩子全黑。不透明度的有效值介于 0 和 1 之间，此示例需要 2！ 因此，根据Martin's comment，您可以在不可见的父级（可见性：隐藏）中有一个可见的子级（可见性：可见）。这是不透明的。如果父母有 opacity:0;它的孩子总是不可见的。

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

根据philnash's answer，屏幕阅读器仍会读取 opacity:0 的元素，而不会读取可见：隐藏的元素。

根据Chris Noe's answer，可见性有更多选项（例如折叠），不可见的元素不再响应点击，也不能被标签到。

（将其设为社区 wiki，否则从现有答案中借用是不公平的。）