CSS隐藏页面元素的方法

最新推荐文章于 2025-07-01 15:26:38 发布

转载最新推荐文章于 2025-07-01 15:26:38 发布 · 94 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lmjZone/p/8716343.html

本文深入探讨了CSS中四种隐藏元素的方法：opacity、visibility、display和position。每种方法都有其独特之处，如对布局的影响、用户交互的响应及对读屏软件的可见性。文章详细解释了这些属性如何工作，并提供了代码示例。

Opacity

opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框而设计的。这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。

.hide {
  opacity: 0;
}

Visibility

将visibility的值设为 hidden 可以隐藏元素。如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。

.hide {
   visibility: hidden;
}

display

display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦 display 设为 none 任何对该元素的用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。任何这个元素的子孙元素也会被同时隐藏。

不过请注意，通过 DOM 依然可以访问到这个元素。因此你可以通过 DOM 来操作它，就像操作其他的元素。

.hide {
   display: none;
}

position

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下面是采用这种办法的 CSS：

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

这种方法的主要原理是通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见。采用这个技术的一个好处（或者潜在的缺点）是用它隐藏的元素的内容可以被读屏软件读取。这完全可以理解，是因为你只是将元素移到可视区域外面让用户无法看到它。

clip-path

隐藏元素的另一种方法是通过剪裁它们来实现。这可以通过 clip 属性来实现，但是这个属性被废弃了，换成一个更好的属性叫做 clip-path。

记住，clip-path 属性还没有被IE或Edge完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要更低。使用 clip-path 属性来隐藏元素的代码看起来如下：

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

转载于:https://www.cnblogs.com/lmjZone/p/8716343.html