用 CSS 隐藏页面元素的方法:
- 将 opacity 设为 0
- 将 visibility 设为 hidden
- 将 display 设为 none
- 将 position 设为 absolute ,并将其抛到不可见区域
- clip-path
1、Opacity
- 将元素设为透明。虽然看不见了,但仍在 渲染树 中,因而元素依然占据它原有的位置。
- 它只是变透明了,所以仍然
能 响应用户交互
。
.hidden{
opacity:0;
filter:alpha(opacity=0); //filter 过滤器 兼容IE678
}
2、Visibility
- 仍在 渲染树 中,因而元素依然占据它原有的位置。
- 与 opacity 不同的是:它不会响应任何用户交互
.hide {
visibility: hidden;
}
3、Display
display:none后元素就 不在 渲染树 中了,因而它被隐藏后也不占据任何空间,所以 就更别谈响应用户的交互了。
.hide {
display: none;
}
4、Position (absolute/fixed)
用position:absolute/fixed把元素脱离文档流移出视觉区域,添加该属性后既不会影响布局,又能让元素保持可以操作。
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
5、clip-path
该属性是通过裁剪的方法实现隐藏的。被隐藏的内容依然占据着那个位置,它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。此外,这个属性能够使用各种过渡动画来实现不同的效果。
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}