在 CSS 中 opacity:0 和 display:none 有什么区别？ [复制]答案

【问题标题】：Within CSS what is the difference between opacity:0 and display:none? [duplicate]在 CSS 中 opacity:0 和 display:none 有什么区别？ [复制]
【发布时间】：2012-01-25 19:19:10
【问题描述】：

我正在使用 jQuery fadeIn/fadeOut 方法，但对它正在做什么感到困惑。文档指出该方法会影响元素的 opacity 属性，但 display:none 也可以隐藏元素然后将其淡入。 opacity:0 和 display:none 是一回事吗？我看到使用这些方法的一些非常不稳定的动画，并且想更好地了解发生了什么。

【问题讨论】：

标签： jquery css

【解决方案1】：

display: none 让元素消失。就像它不存在一样。这意味着您的布局可能会发生变化。

opacity: 0 这个只是让你的元素不可见。它不会对您的布局产生任何影响。

【讨论】：

【解决方案2】：

opacity:0 仍然允许在元素上单击、悬停和其他鼠标事件。它只是对用户不可见。

display:none 做了它所暗示的——该元素仍然存在但完全不可见，就好像它的 width 和 height 是 0。

【讨论】：

【解决方案3】：

不透明度会影响对象的透明度。
显示会影响对象在 Web 浏览器中的呈现方式。

例如：

 This text is here!
 <div style="opacity:0">
 This text will be invisible
 </div>
 this text will be here

这个（对查看它的用户而言）将使它看起来像“这个文本在这里！”和“this text will be here”之间有一个换行符。

还有这个例子：

This text is here!
<div style="display:none">
This text will be invisible
</div>
this text will be here

这（对用户而言）会使两条可见线看起来直接在彼此之上，中间没有空格。

在 JQuery 中，淡入或淡出将分别将 Display 从“none”更改为“block”，反之亦然。它还将在分配的时间内将不透明度从 0 平滑地设置为 1，反之亦然。

【讨论】：

【解决方案4】：

除了@arminb 的回答（我不能只评论它） display:none 将适用于所有（模糊的现代）浏览器， opacity:0 在旧浏览器中具有片状支持（不适用于 IE6、7或 8)

如果您确实需要不透明度，那么这样的东西应该可以工作：

.opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

但这很混乱。 display:none 是最干净的解决方案。 visibility:hidden 也可以在比 opacity 更多的浏览器中工作并达到相同的目的（即使其不可见，但保留在那里）

【讨论】：

【解决方案5】：

display: none 就像从页面中删除了一个对象，opacity: 0 或 visibility: none 都将对象保留在页面上，但只是让一切变得清晰，并在原处留下空白空间。当它是 opacity: 0 你仍然可以点击它，但我不认为可见性相同：none。

【讨论】：

【解决方案6】：

它们都会使文本不可见，但display: none; 会使它看起来好像从未存在过，而opacity:0.0; filter:alpha(opacity=0); 会使它看起来好像缺少某些东西。

例如。

display: none;

This is text
<div style="display: none;">This test is invisible</div>
This is more text

将显示为

这是文字
这是更多的文字

opacity:0.0; filter:alpha(opacity=0);

This is text
<div style="opacity:0.0; filter:alpha(opacity=0);">This test is invisible</div>
This is more text

将显示为

这是文字

这是更多的文字

有意义吗？

【讨论】：

【解决方案7】：

这两种情况都使元素不可见，但属性不同：

opacity: 0 ：不可见，但占用显示空间（影响布局），并且可点击
display: none ：不可见，不占用显示空间，因此不可点击

让我添加与此上下文相关的第三个：

visibility: hidden：不可见，占用显示空间，不可点击

我在这里做了一个演示 JSFiddle：http://jsfiddle.net/sebastien_worms/tCbJD/

【讨论】：

... 也许它并不正确，因为如果我理解正确，DOM 不是关于显示的。感谢您指出错误，我正在编辑帖子。