有的时候,我们都希望自己能隐身。HTML元素其实也是这样。有的时候,它们也想藏起来一段时间。并不是完全被删除——而是暂时隐身一会儿。
还好,CSS为我们提供了多种方式,让HTML元素消失一段时间。
我们现在选一个HTML元素,把它的类指定为“ghost(幽灵)”,然后让它隐身。
//index.html
<div class=”ghost”>
<p>I’m friendly!</p>
</div>
//style.css
.ghost {
}
默认情况下,HTML元素都是可见的。它们默认的CSS可见性(visibility)属性是可见的,但是你可以做点改变:
.ghost {
visibility: hidden;
}
现在这个幽灵就彻底隐身了,但是它依然会占据页面上的位置。
如果你想让某个元素彻底消失,连页面上的空间都不出现,你可以使用CSS的display属性。
一般情况下,开发者会有display属性来定义一个HTML元素是要以block元素的形式出现,还是以inline元素的形式出现。但是其实,它还可以用来彻底隐藏元素:
.ghost {
display: none;
}
与可见性,这种方式操作之后,元素不会占据页面上的空间。
你还可以使用CSS的opacity(透明度)属性让元素彻底透明:
.ghost {
opacity: 0.0;
}
与visibility: hidden一样,opacity: 0.0这种做法尽管会让元素小时,但是它依然会占据空间,在页面上留下一块空白。请记住,使用上述方法的时候,元素依然是DOM的一部分——只不过普通用户无法在浏览器中看到他们。
跑远点,再远点,再远点……
隐藏元素的一个终极打法,就是将它移动到离页面非常非常远的地方,你必须要疯狂缩放页面才能看到它。
要想做到这一点,首先你需要使用CSS的position(定位)属性,给元素在页面上指定一个绝对位置。
然后,你要用一个非常大的数字,来将元素移动到页面的可视范围之外:
.ghost {
position: absolute;
left: -999999px;
}
这么做有什么实际意义?有的时候,它能够提升内容的无障碍性。例如屏幕阅读器——盲人用户使用这个东西来收听浏览器中的内容——可以拾取这个内容,而其他用户则无法看到。
要想获得最好的结果,你应该将这些元素移动到页面的左侧,而不要移动到顶端或是最下面,否则会混淆屏幕阅读器。
原文来自:sdk
声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com
根据给定的手机号、姓名、身份证、人像图片核验是否一致
通过企业关键词查询企业涉讼详情,如裁判文书、开庭公告、执行公告、失信公告、案件流程等等。
IP反查域名是通过IP查询相关联的域名信息的功能,它提供IP地址历史上绑定过的域名信息。
结合权威身份认证的精准人脸风险查询服务,提升人脸应用及身份认证生态的安全性。人脸风险情报库,覆盖范围广、准确性高,数据权威可靠。
全国城市和站点空气质量查询,污染物浓度及空气质量分指数、空气质量指数、首要污染物及空气质量级别、健康指引及建议采取的措施等。