用 CSS 隐藏页面元素
- opacity 设为 0
- 将 visibility 设为 hidden
- 将 display 设为 none
- 将 position 设为 absolute 然后将位置设到不可见区域。
.hide {opacity: 0; }
.hide {visibility: hidden; }
display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。不仅如此,一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。
任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的,它的任何不同状态值之间的切换总是会立即生效。
.hide {display: none; }
.hide {position: absolute;top: -9999px;left: -9999px; }
Clip-path,占据布局,不可以交互,可以被读屏软件读到,但IE或Edge不支持
隐藏元素的另一种方法是通过剪裁它们来实现。在以前,这可以通过 clip 属性来实现,但是这个属性被废弃了,换成一个更好的属性叫做 clip-path 。Nitish Kumar 最近在 SitePoint 发表了 “介绍 clicp-path 属性” 这篇文章,通过阅读它可以了解这个属性的更多高级用法。
.hide {clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }
用 CSS 隐藏页面元素相关推荐
- CSS中隐藏页面元素的几种方式和区别
前言. 在平常的样式排版中,我们经常遇到将某个模块隐藏的场景,通过css隐藏的元素方法有很多种,它们看起来实现的效果是一致的,但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪 ...
- CSS中有哪些隐藏页面元素的方法?
目录 一.前言 二.隐藏页面元素的实现方法 1.利用display:none实现 2.利用visibility:hidden隐藏元素 3.利用opacity:0来隐藏元素 4.设置width,heig ...
- CSS中有哪几种方式能隐藏页面元素(8种)
1.opacity:0 元素的透明度化为零,隐藏,占据空间,可以交互 2.visibility:hiden 隐藏,占据空间,不可以交互 3.overflow:hiden 隐藏元素溢出的部分,占据空间, ...
- css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位 一 """ # #通过id # driver.find_element_by_css_selector(" ...
- 使用CSS隐藏HTML元素的4种常用方法
现在的网页设计越来越动态化,我们经常需要隐藏某些元素,在特定的时候才显示它们.我们通常可以使用4种方法来隐藏和显示元素. 这4种显示和隐藏元素的技术各自有它们自己的优点的缺点,下面来举例说明. 在这篇 ...
- css提取页面元素唯一性_一日一技:爬虫如何正确从网页中提取伪元素?
摄影:产品经理家里做点简单菜 我们来看一个网页,大家想想使用 XPath 怎么抓取. 可以看到,在源代码里面没有请抓取我!这段文字.难道这个网页是异步加载?我们现在来看一下网页的请求: 网页也没有发起 ...
- css提取页面元素唯一性_下面这个函数,能够获取一个元素的任意 CSS 属性值。...
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...
- 文字开头隐藏css,浅析CSS隐藏页面文字的几种方式总结
方式一:text-indent:-9999px 不多说,ext-indent负值为最常用方法,然问题有三: 1.较大的负值有性能问题,例如新浪/腾讯微博提交按钮的-9999em,大概12~16万像素的 ...
- CSS隐藏元素的五种方法
用css隐藏页面元素有许多种方法. 1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute opacity opacity ...
- html隐藏后还占位置,css隐藏不占位置的方法是什么?
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...
最新文章
- 人工神经外网络中为什么ReLu要好过于Tanh和Sigmoid Function?
- 如何在Ubuntu上使用ssh-add永久添加私钥? [关闭]
- 使用Java处理除法运算的陷阱
- 解决jmeter响应中文乱码及解码
- 递归javascript_使用freeCodeCamp挑战解释了JavaScript中的递归
- c语言2维动态数组,如何创建一个动态2维数组?
- ftp服务器搭建与使用
- nginx+php使用open_basedir限制站点目录防止跨站
- 蓝桥杯 ALGO-151 算法训练 6-2递归求二进制表示位数
- selenium webdriver——鼠标事件
- linux p2p1网卡,linux下解决P2P终结者
- 数据库:SQL数据查询(详细、全面)
- Android6.0之AMS启动app中篇之创建app进程
- html5shiv版本,用html5shiv.js解决ie低版本浏览器支持html5标签
- OfficeExcel(5)
- springBoot做后台实现微信小程序图片上传和下载
- 申城「三日谈」:言汇百家,思通以达(SDCC 2017上海站PPT集锦)
- opencv23:Histogram直方图反向投影
- matlab计算轮廓曲率半径,matlab求曲率半径
- [Luogu 1516] 青蛙的约会