在CSS中，opacity:0和display:none有什么区别？

Question

我正在使用jQuery的fadeIn/fadeOut方法，并对它究竟在做什么感到困惑。文档中提到该方法会影响元素的不透明度，但是display:none也可以隐藏一个元素并将其淡入。opacity:0和display:none是相同的吗？我使用这些方法时看到一些非常卡顿的动画，希望更好地理解正在发生的事情。

- thesteve

Answer 1

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

opacity: 0 只会使您的元素不可见，而不会对您的布局产生任何影响。

- arminb

Answer 2

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

• opacity: 0 ：不可见，但是占据空间（影响布局），并且可以点击
• display: none ：不可见，不占据空间，因此无法点击

让我再加一个在这种情况下相关的第三种：

• visibility: hidden ：不可见，占据空间，并且无法点击

我已经在这里制作了一个演示 JSFiddle：http://jsfiddle.net/sebastien_worms/tCbJD/。

- sebastien.worms

---

也许这并不是完全正确的，因为如果我理解正确的话，DOM 并不是关于显示的。感谢指出错误，我正在编辑帖子。 - sebastien.worms

Answer 3

opacity:0 仍然允许元素被点击、悬停和其他鼠标事件。只是用户看不到它。

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

- Purag

Answer 4

display: none 就像一个对象从页面上被移除了，opacity: 0 或者 visibility: none 都会让对象保留在页面上但是变得透明或不可见，空出它原本所占据的空间。当使用 opacity: 0 时，你仍然可以点击对象，但我认为 visibility: none 不行。

- Control Freak

Answer 5

他们都会使文本不可见，但是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

将显示为

这是文本

这是更多的文本

---

有意义吗？

- user1106352

Answer 6

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

例如：

 This text is here!
 <div style="opacity:0">
 This text will be invisible
 </div>
 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中，淡入或淡出将会从“none”变为“block”或者相反。同样地，透明度也会在规定的时间内平滑地从0变化到1，或者相反。

- Kodlee Yin

Answer 7

除了@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在更多的浏览器中也可以正常工作，并实现相同的目的（即使其不可见，但仍然存在）。

- SpoonNZ