如何用纯 CSS 方式控制一个元素的隐藏, 不可见? 下面本篇文章就来给大家介绍一些使用 CSS 让元素不可见的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
html 代码
<div>hello!</div>
方法 1:display:none;
- div {
- display:none;
- }
display 属性 能将元素真正隐藏, 而且隐藏的元素不会占据任何空间, 会让人觉得这个元素好像完全不存在. 但是该元素是能够被访问到的, 可以通过 DOM 来操作这个元素.
方法 2:opacity:0;
- div {
- opacity:0;
- }
这个方法是通过给元素设置透明度, 从视觉上来隐藏元素的一种方法. 元素本身存在, 并且占据原有的位置.
方法 3:visibility:hidden;
- div {
- visibility:hidden;
- }
这个方法和 opacity 一样, 隐藏起来依然能作用于网页布局, 但是它和 opacity 不一样在于它不会响应任何用户交互.
注意: 如果一个元素的 visibility 被设置为 hidden, 同时想要显示它的某个子孙元素, 只要将那个元素的 visibility 显式设置为 visible 即可.
方法 4:position 属性 -- 绝对定位方式移出可视区域
- div {
- position: absolute;
- top: -9999px;
- left: -9999px;
- }
这个方法是通过将 left 和 top 的值设的很大, 让元素在我们不可见的区域中去.
方法 5:clip-path 属性
- div {
- clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
- }
这个方法是通过裁剪元素来实现的, 通过为我们提供了一系列的坐标来创建路径也就是我们常常说的 X,Y. 当创建完一个闭合的路径时, 位于路径内部的区域就可见, 而路径外的区域就不可见. 这样就实现了裁剪效果. 我们可以用这个属性来创建各种图形, 如圆形, 多边形, 三角形, 椭圆形等等. 更多扩展大家可以点击该链接, 有实例拓展.
来源: http://www.css88.com/qa/css3/12931.html