CSS隐藏页面元素的方法
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); }