CSS隐藏元素的10种方法

本文概述

• 动画
• 辅助功能
• 事件处理
• 性能
• 1.不透明度和过滤器：opacity()
• 2.彩色Alpha透明度
• 3.转换
• 4.剪切路径
• 5.能见度
• 6.展示
• 7. HTML隐藏属性
• 8.绝对位置
• 9.覆盖另一个元素
• 10.缩小尺寸
• 隐藏的选择

在CSS中隐藏元素有多种方法, 但是它们影响可访问性, 布局, 动画, 性能和事件处理的方式不同。

动画

一些CSS隐藏选项全部或全部消失。元素完全可见或完全不可见, 并且没有中间状态。其他值（例如透明度）可以具有一定范围的值, 因此插值CSS动画成为可能。

辅助功能

下文所述的每种方法将在视觉上隐藏元素, 但它可能会或可能不会隐藏辅助技术中的内容。例如, 屏幕阅读器仍可以宣布微小的透明文本。可能需要其他CSS属性或ARIA属性（例如aria-hidden =“ true”）来描述适当的操作。

警惕动画还会对某些人造成迷失方向, 偏头痛, 癫痫发作或其他身体不适。当在用户首选项中指定时, 请考虑使用“喜好运动减少”媒体查询来关闭动画。

事件处理

隐藏将停止在该元素上触发事件或将其无效-即, 该元素不可见, 但仍可以单击或接收其他用户交互。

性能

浏览器加载并解析HTML DOM和CSS对象模型后, 页面将分三个阶段呈现：

1. 布局： 生成每个元素的几何形状和位置
2. 涂料： 画出每个元素的像素
3. 组成: 按适当的顺序放置元素层

仅引起构图变化的效果比影响布局的效果明显更平滑。在某些情况下, 浏览器还可以使用硬件加速。

1.不透明度和过滤器：opacity()

可以将opacity：N和filter：opacity（N）属性传递给介于0和1之间的数字, 或者传递介于0％和100％之间的百分比, 以表示完全透明和完全不透明。

请参见具有不透明性的钢笔隐藏：由CodePen上的SitePoint（@SitePoint）设置为0。

两者在现代浏览器中几乎没有实际区别, 尽管如果同时应用多种效果（模糊, 对比度, 灰度等）, 则应使用过滤器。

不透明度可以设置动画效果并提供出色的性能, 但请注意页面上仍保留完全透明的元素并可以触发事件。

2.彩色Alpha透明度

不透明度会影响整个元素, 但也可以分别设置颜色, 背景颜色和边框颜色属性。使用rgba（0, 0, 0, 0）或类似方法应用零Alpha通道可使项目完全透明：

在CodePen上查看由SitePoint（@SitePoint）使用颜色为Alpha的笔隐藏物。

每个属性可以单独设置动画以创建有趣的效果。请注意, 除非使用线性渐变或类似方法生成具有图片背景的元素, 否则无法将其应用于透明背景。

可以通过以下方式设置Alpha通道：

• 透明的：完全透明的（中间动画是不可能的）
• rgba（r, g, b, a）：红色, 绿色, 蓝色和Alpha
• hsla（h, s, l, a）：色相, 饱和度, 亮度和alpha
• #RRGGBBAA和#RGBA

3.转换

transform属性可用于平移（移动）, 缩放, 旋转或倾斜元素。屏幕外缩放（0）或平移（-999px, 0px）将隐藏元素：

请参阅带有转换的笔隐藏：scale（0）;由SitePoint（@SitePoint）在CodePen上创建。

变换可提供出色的性能和硬件加速, 因为该元素可以有效地移动到单独的图层中, 并且可以2D或3D进行动画处理。原始布局空间保持不变, 但是完全隐藏的元素不会触发任何事件。

4.剪切路径

clip-path属性创建一个裁剪区域, 该裁剪区域确定元素的哪些部分可见。使用诸如clip-path的值：circle（0）;将完全隐藏该元素。

在CodePen上查看带有SitePath（@SitePoint）的带剪切路径的笔隐藏。

剪贴路径为有趣的动画提供了范围, 尽管仅在现代浏览器中应使用它。

5.能见度

可见性属性可以设置为visible或hidden以显示和隐藏元素：

请参阅具有可见性的笔隐藏：由CodePen上的SitePoint（@SitePoint）隐藏。

除非使用折叠值, 否则元素使用的空间将保持不变。

6.展示

显示可能是最常用的元素隐藏方法。值为none会有效删除元素, 就好像它在DOM中不存在一样。

请参阅带有显示的笔隐藏：CodePen上的SitePoint（@SitePoint）没有显示。

但是, 在大多数情况下, 它可能是最差的CSS属性。除非该元素使用以下位置移出文档流, 否则它将无法设置动画, 并会触发页面布局：绝对或采用新的contains属性。

显示也过载, 包括块, 内联, 表格, flexbox, 网格等选项。显示后重置为正确的值：无；可能会有问题（尽管未设置可能有所帮助）。

7. HTML隐藏属性

HTML隐藏属性可以添加到任何元素：

<p hidden>
  Hidden content
</p>

应用浏览器的默认样式：

[hidden] {
  display: none;
}

它具有与显示相同的优点和缺点：无, 但在使用不允许样式更改的内容管理系统时很有用。

8.绝对位置

position属性允许元素使用顶部, 底部, 左侧和右侧从页面布局中的默认静态位置移动。因此, 绝对位置的元素可以在屏幕外向左移动-999px或类似位置：

在CodePen上查看具有以下位置的笔隐藏：SitePoint（@SitePoint）的绝对位置。

9.覆盖另一个元素

通过在顶部放置与背景颜色相同的颜色, 可以在视觉上隐藏一个元素。在此示例中, 尽管可以使用任何子元素, 但::: after伪元素会被覆盖：

在CodePen上查看带有SitePoint（@SitePoint）覆盖的笔隐藏物。

尽管在技术上可行, 但此选项比其他选项需要更多的代码。

10.缩小尺寸

通过使用宽度, 高度, 填充, 边框宽度和/或字体大小来最小化元素的尺寸, 可以隐藏元素。可能还需要应用溢出：隐藏；以确保内容不会溢出。

在CodePen上查看带有SitePoint（@SitePoint）宽度或高度的钢笔皮。

有趣的动画效果是可能的, 但是变换效果明显更好。

隐藏的选择

display：多年来, 没有一种是隐藏元素的首选解决方案, 但是它已被更灵活, 可设置动画的选项所取代。它仍然有效, 但可能仅在你要向所有用户永久隐藏内容时才有效。考虑性能时, transform或opacity是更好的选择。

使用CSS Master将你的CSS技能提升到一个新的水平。了解CSS架构, 调试, 自定义属性, 高级布局和动画技术, 如何将CSS与SVG结合使用等。