CSS隐藏元素的几种方法

97pra

于 2020-09-17 15:05:53 发布

阅读量151

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端概念性知识点

本文链接：https://blog.youkuaiyun.com/zxc123789tm/article/details/108643617

5 篇文章

订阅专栏

opacity: 0; 元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

visibility:hidden; 与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

display:none; display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

position: -xxxxxxxx; 不会影响布局，能让元素保持可以操作;

Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。

如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;