不同场景下使用CSS隐藏元素

最新推荐文章于 2025-05-20 21:00:51 发布

weixin_30724853

最新推荐文章于 2025-05-20 21:00:51 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/laixiangran/p/8992946.html

本文介绍了多种使用CSS实现元素隐藏的方法，包括使用display:none、visibility:hidden等属性的不同应用场景，并详细解释了每种方法的特点及适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 CSS 让元素不可见的方法很多，剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见，但背后却在多个维度上都有差别。

使用 script 标签隐。例如：

<script type="text/html">
    <img src="1.jpg">
</script>

此时，图片 1.jpg 是不会有请求的。<script> 标签是不支持嵌套的，因此，如果希望在 <script> 标签中再放置其他不渲染的模板内容，可以试试使用 <textarea> 元素。例如：

<script type="text/html">
    <img src="1.jpg">
    <textarea style="display: none;">
        <img src="2.jpg">
    </textarea>
</script>

同样 2.jpg 也是不会有请求的。
另外，<script> 标签隐藏内容获取使用 script.innerHTML，<textarea> 使用 textarea.value。

使用 display: none 隐藏。例如：

.dn {
    display: none;
}

使用 position: absolute 和 visibility: hidden; 隐藏。例如：

.hidden {
    position: absolute;
    visibility: hidden;
}

使用 visibility: hidden; 隐藏。例如：

.hn {
    visibility: hidden;
}

使用 clip 裁剪或者 relative 隐藏。例如：

.clip {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

.out {
    position: relative;
    left: -999em;
}

使用 relative 和 z-index 隐藏。例如，如果条件允许，也就是和层叠上下文之间存在设置了背景色的父元素，则也可以使用更友好的 z-index 负值隐藏。例如：

.lower {
    position: relative;
    z-index: -1;
}

使用透明度隐藏。例如：

.lower {
    position: relative;
    opacity: 0;
    filter: Alpha(opacity=0);
}

使用透明度隐藏。例如：

.lower {
    opacity: 0;
    filter: Alpha(opacity=0);
}

大家可以通过实际的隐藏场景选择合适的隐藏方法。

实际开发场景千变万化，可能还有更多的隐藏方法，也欢迎大家积极留言探讨。

摘自：《CSS世界》第10章元素的显示与隐藏

转载于:https://www.cnblogs.com/laixiangran/p/8992946.html