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

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

(我知道 Internet Explorer 还不支持这个 css2属性。)
布局引擎的比较

另请参阅: 可见性: 隐藏和显示: 无之间的区别是什么

69087 次浏览
小开

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

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

小开

我不完全确定，但这是我如何做跨浏览器透明度:

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

具有可见性的物体: 隐藏仍然有形状，他们只是不可见。不透明度零元素仍然可以单击并对其他事件作出反应。

小开

菲尔说的是真的。

IE 支持不透明性:

filter:alpha(opacity=0);
小开
最佳答案

以下是来自不同答案的经过核实的信息汇编。

这些 CSS 属性中的每一个都是唯一的。除了呈现不可见的元素外，它们还有以下附加效果:

  1. 折叠 元素通常会占用的空间
  2. 响应 事件(例如，单击，按键)
  3. 参与 禁忌
collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse   Yes*    No      No
display: none          Yes     No      No


* Yes inside a table element, otherwise No.
小开

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

小开

没有。

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

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

小开

不，不是这样的，这两者有很大的区别。 它们是相似的，因为如果可见性是隐藏的，或者不透明度为0，您可以看穿元素

不透明度: 0 : 背后元素的 你不能点击。

可见性: 隐藏 : 你可以点击在其后面的元素上。

小开

在创建影响 contenteditable中元素的用户样式时，我注意到，如果将某些内容设置为 visibility: hidden，那么输入插入符号实际上并不希望与其交互。如果有的话

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

... 那么看起来如果你把 div/span 集中在一起，你就不能真正地输入它。而使用 opacity: 0似乎可以。我还没有进行过广泛的测试，但是我认为值得在这里提一下，因为在这个页面上还没有其他人讨论过对文本输入的影响。这可能与上面提到的 事件有关。

小开

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

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

  2. 不透明是可动画的，而可见性是不可动画的。
    (好吧，是 严格来说，但是没有定义任何行为，比如说，“37% 折叠，63% 隐藏”，所以你可以认为这是不可动画的。)

  3. 使用不透明度，不能使子元素比其父元素更不透明。例如，如果一个 p 的颜色为: 黑色，不透明度为: 0.5，则不能使其任何子元素完全为黑色。不透明度的有效值在0到1之间，这个示例需要2！
    因此，根据 马丁的评论，您可以在一个不可见的父级中拥有一个可见的子级(可见性: 可见)(可见性: 隐藏)。对于不透明，这是不可能的; ，如果父级不透明: 0; ，其子级始终是不可见的。

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

  5. 根据 Philnash 的回答，具有不透明度: 0的元素仍然被屏幕阅读器读取，而可见: 隐藏元素则不会。

  6. 根据 Chris Noe 的回答，可见性有更多选项(比如折叠) ，不可见的元素不再响应单击，也不能选项卡。

(让这成为一个社区维基，因为从现有的答案中借鉴是不公平的。)


提交答案