使用 CSS 让元素不可见的方法很多，剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见，但背后却在多个维度上都有差别
元素不可见，同时不占据空间、辅助设备无法访问、不渲染
<script type="text/html">
<img src="1.jpg">
</script>
<script type="text/html">
<img src="1.jpg">
<textarea style="display: none;">
<img src="2.jpg">
</textarea>
</script>
元素不可见，同时不占据空间、辅助设备无法访问，但资源有加载，DOM 可访问
.dn {
display: none;
}
元素不可见，同时不占据空间、辅助设备无法访问，但显隐的时候可以有 transition 淡入淡出效果
.hidden {
position: absolute;
visibility: hidden;
}
元素不可见，不能点击、辅助设备无法访问，但占据空间保留
.hn {
visibility: hidden;
}
元素不可见，不能点击、不占据空间，但键盘可访问
.clip {
position: absolute;
clip: rect(0, 0, 0, 0)
}
.out {
position: relative;
left: -999em;
}
元素不可见，不能点击、但占据空间、键盘可访问
.lower {
position: relative;
z-index: -1;
}
元素不可见，可以点击、不占据空间
.lower {
position: relative;
opacity: 0;
filter: Alpha(opacity=0);
}
元素不可见，可以点击、可以选择、占据空间
.lower {
opacity: 0;
filter: Alpha(opacity=0);
}
服务热线 19970861797
