不显示对面 - CSS

在 CSS 中，不显示对面可以通过 visibility 和 opacity 属性来实现。这两个属性都可以让元素看起来不可见，但其实是有一些差别的。

visibility 属性

visibility 属性可以控制元素在页面上是否可见，可以取值 visible、hidden、collapse 和 inherit。其中，visible 是默认值，表示元素可见；hidden 表示元素不可见，但仍然占据页面上的空间，而且仍可以响应交互事件；collapse 仅适用于表格元素，将隐藏表格元素；inherit 则从父元素继承属性。以下是 visibility 的例子：

.visible {
    visibility: visible;
}

.hidden {
    visibility: hidden;
}

在 HTML 中应用这两个类名：

<div class="visible">这个元素是可见的。</div>
<div class="hidden">这个元素是不可见的。</div>

visibility: hidden 对应的元素在页面上看起来是不存在的（即不可见），但是却仍然占据页面上的空间，也会接收到交互事件（如鼠标悬停、点击等）。这种方式适合在页面上保留元素占位，但又不想让其完全消失的情况。

opacity 属性

opacity 属性指定元素的透明度，可以取值 0-1，其中 0 表示完全透明，1 表示完全不透明。以下是 opacity 的例子：

.visible {
    opacity: 1;
}

.hidden {
    opacity: 0;
}

在 HTML 中应用这两个类名：

<div class="visible">这个元素是完全不透明的。</div>
<div class="hidden">这个元素是完全透明的，即不可见。</div>

opacity: 0 对应的元素在页面上看起来是不存在的，不占用页面上的空间，也不会接收到交互事件。这种方式适合在需要完全隐藏元素的情况。

总之，在 CSS 中，可以通过 visibility 和 opacity 属性来控制元素的可见性和透明度，不显示对面的效果可以通过调节这两个属性来实现。