5种css隐藏元素的方法_在CSS中隐藏元素的10种方法

柔情只为你懂 2022-12-03 01:38 258阅读 0赞

5种css隐藏元素的方法

**There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling.**

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

## 动画 **(**Animation**)** ##

Some CSS hiding options are all or nothing. The element is either fully visible or fully invisible and there’s no in-between state. Others, such as transparency, can have a range of values, so interpolated CSS animations become possible.

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

## 辅助功能 **(**Accessibility**)** ##

Each method described below will visually hide an element, but it may or may not hide the content from assistive technologies. For example, a screen reader could still announce tiny transparent text. Further CSS properties or [ARIA attributes][] such as `aria-hidden="true"` may be necessary to describe the appropriate action.

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

Be wary that animations can also cause disorientation, migraines, seizures, or other physical discomfort for some people. Consider using a [`prefers-reduced-motion`][prefers-reduced-motion] media query to switch off animations when specified in user preferences.

警惕动画还会对某些人造成迷失方向，偏头痛，癫痫发作或其他身体不适。 考虑在用户首选项中指定时，使用“偏好[`prefers-reduced-motion`][prefers-reduced-motion]媒体查询来关闭动画。

## 事件处理 **(**Event Handling**)** ##

Hiding will either stop events being triggered on that element or have no effect — that is, the element is not visible but can still be clicked or receive other user interactions.

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

## 性能 **(**Performance**)** ##

After a browser loads and parses the HTML DOM and CSS object model, the page is rendered in three stages:

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

1.  **Layout:** generate the geometry and position of each element
    
    **布局：**生成每个元素的几何形状和位置
2.  **Paint:** draw out the pixels for each element
    
    **绘制：**绘制每个元素的像素
3.  **Composition**: position element layers in the appropriate order
    
    **组成** ：以适当的顺序放置元素图层

An effect which only causes composition changes is noticeably smoother than those affecting layout. In some cases, the browser can also use hardware acceleration.

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

## 1. `opacity`和`filter: opacity()` **(**1. `opacity` and `filter: opacity()`**)** ##

The [`opacity: N`][opacity_ N] and [`filter: opacity(N)`][filter_ opacity_N] properties can be passed a number between 0 and 1, or a percentage between 0% and 100% denoting fully transparent and fully opaque accordingly.

可以将[`opacity: N`][opacity_ N]和[`filter: opacity(N)`][filter_ opacity_N]属性传递给介于0和1之间的数字，或者传递介于0％和100％之间的百分比，以表示完全透明和完全不透明。

See the Pen [ hide with opacity: 0][hide with opacity_ 0] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [将不透明][hide with opacity_ 0]的笔[隐藏起来：0][hide with opacity_ 0] 。

There’s little practical difference between the two in modern browsers, although `filter` should be used if multiple effects are applied at the same time (blur, contrast, grayscale etc.)

两者在现代浏览器中几乎没有实际区别，尽管如果同时应用多种效果(模糊，对比度，灰度等)，则应使用`filter` 。

Opacity can be animated and offers great performance, but be wary that a fully transparent element remains on the page and can trigger events.

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

<table> 
 <thead> 
  <tr> 
   <th>metric</th> 
   <th>effect</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>browser support</td> 
   <td>good, but IE only supports <code>opacity</code> 0 to 1</td> 
  </tr> 
  <tr> 
   <td>accessibility</td> 
   <td>content not read if 0 or 0% is set</td> 
  </tr> 
  <tr> 
   <td>layout affected?</td> 
   <td>no</td> 
  </tr> 
  <tr> 
   <td>rendering required</td> 
   <td>composition</td> 
  </tr> 
  <tr> 
   <td>performance</td> 
   <td>best, can use hardware acceleration</td> 
  </tr> 
  <tr> 
   <td>animation frames possible?</td> 
   <td>yes</td> 
  </tr> 
  <tr> 
   <td>events triggered when hidden?</td> 
   <td>yes</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th> 公制 </th> 
   <th> 影响 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 浏览器支持 </td> 
   <td> 很好，但是IE仅支持<code>opacity</code> 0到1 </td> 
  </tr> 
  <tr> 
   <td> 可及性 </td> 
   <td> 如果设置为0或0％，则无法读取内容 </td> 
  </tr> 
  <tr> 
   <td> 布局受影响吗？ </td> 
   <td> 没有 </td> 
  </tr> 
  <tr> 
   <td> 需要渲染 </td> 
   <td> 组成 </td> 
  </tr> 
  <tr> 
   <td> 性能 </td> 
   <td> 最好，可以使用硬件加速 </td> 
  </tr> 
  <tr> 
   <td> 动画帧可能吗？ </td> 
   <td> 是 </td> 
  </tr> 
  <tr> 
   <td> 隐藏时触发事件？ </td> 
   <td> 是 </td> 
  </tr> 
 </tbody> 
</table>

## 2. `color` Alpha透明度 **(**2. `color` Alpha Transparency**)** ##

`opacity` affects the whole element, but it’s also possible to set the [`color`][color], [`background-color`][background-color], and [`border-color`][border-color] properties separately. Applying a zero alpha channel using `rgba(0,0,0,0)` or similar renders an item fully transparent:

`opacity`会影响整个元素，但是也可以分别设置[`color`][color] ， [`background-color`][background-color]和[`border-color`][border-color]属性。 使用`rgba(0,0,0,0)`或类似方法应用零alpha通道将使项目完全透明：

See the Pen [ hide with color alpha][hide with color alpha] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

在[CodePen][SitePoint]上[查看][CodePen]由SitePoint( [@SitePoint][SitePoint] )的[颜色为Alpha][hide with color alpha]的笔[隐藏][hide with color alpha] [物][CodePen] 。

Each property can be animated separately to create interesting effects. Note that transparency can’t be applied to elements with image backgrounds unless they’re generated using [`linear-gradient`][linear-gradient] or similar.

每个属性可以单独设置动画以创建有趣的效果。 请注意，除非使用[`linear-gradient`][linear-gradient]或类似方法生成透明元素，否则不能将其应用于具有图像背景的元素。

The alpha channel can be set with:

可以使用以下方式设置Alpha通道：

*  `transparent`: fully transparent (in-between animations are not possible)
    
    `transparent` ：完全透明的(中间动画是不可能的)
 *  `rgba(r, g, b, a)`: red, green, blue, and alpha
    
    `rgba(r, g, b, a)` ：红色，绿色，蓝色和Alpha
 *  `hsla(h, s, l, a)`: hue, saturation, lightness, and alpha
    
    `hsla(h, s, l, a)` ：色相，饱和度，亮度和alpha
 *  `#RRGGBBAA` and `#RGBA`
    
    `#RRGGBBAA`和`#RGBA`

<table> 
 <thead> 
  <tr> 
   <th>metric</th> 
   <th>effect</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>browser support</td> 
   <td>good, but IE only supports <code>transparent</code> and <code>rgba</code></td> 
  </tr> 
  <tr> 
   <td>accessibility</td> 
   <td>content still read</td> 
  </tr> 
  <tr> 
   <td>layout affected?</td> 
   <td>no</td> 
  </tr> 
  <tr> 
   <td>rendering required</td> 
   <td>painting</td> 
  </tr> 
  <tr> 
   <td>performance</td> 
   <td>good, but not as fast as <code>opacity</code></td> 
  </tr> 
  <tr> 
   <td>animation frames possible?</td> 
   <td>yes</td> 
  </tr> 
  <tr> 
   <td>events triggered when hidden?</td> 
   <td>yes</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th> 公制 </th> 
   <th> 影响 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 浏览器支持 </td> 
   <td> 很好，但是IE仅支持<code>transparent</code>和<code>rgba</code> </td> 
  </tr> 
  <tr> 
   <td> 可及性 </td> 
   <td> 内容仍在阅读 </td> 
  </tr> 
  <tr> 
   <td> 布局受影响吗？ </td> 
   <td> 没有 </td> 
  </tr> 
  <tr> 
   <td> 需要渲染 </td> 
   <td> 绘画 </td> 
  </tr> 
  <tr> 
   <td> 性能 </td> 
   <td> 很好，但不如<code>opacity</code> </td> 
  </tr> 
  <tr> 
   <td> 动画帧可能吗？ </td> 
   <td> 是 </td> 
  </tr> 
  <tr> 
   <td> 隐藏时触发事件？ </td> 
   <td> 是 </td> 
  </tr> 
 </tbody> 
</table>

## 3. `transform` **(**3. `transform`**)** ##

The [`transform`][transform] property can be used to translate (move), scale, rotate, or skew an element. A `scale(0)` or `translate(-999px, 0px)` off-screen will hide the element:

[`transform`][transform]属性可用于平移(移动)，缩放，旋转或倾斜元素。 屏幕外`scale(0)`或`translate(-999px, 0px)`将隐藏元素：

See the Pen [ hide with transform: scale(0);][hide with transform_ scale_0] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[带有转换][hide with transform_ scale_0]的笔[隐藏：scale(0);][hide with transform_ scale_0] 通过SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

`transform` offers excellent performance and hardware acceleration because the element is effectively moved into a separate layer and can be animated in 2D or 3D. The original layout space remains as is, but no events will be triggered by a fully hidden element.

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

<table> 
 <thead> 
  <tr> 
   <th>metric</th> 
   <th>effect</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>browser support</td> 
   <td>good</td> 
  </tr> 
  <tr> 
   <td>accessibility</td> 
   <td>content still read</td> 
  </tr> 
  <tr> 
   <td>layout affected?</td> 
   <td>no — the original dimensions remain</td> 
  </tr> 
  <tr> 
   <td>rendering required</td> 
   <td>composition</td> 
  </tr> 
  <tr> 
   <td>performance</td> 
   <td>best, can use hardware acceleration</td> 
  </tr> 
  <tr> 
   <td>animation frames possible?</td> 
   <td>yes</td> 
  </tr> 
  <tr> 
   <td>events triggered when hidden?</td> 
   <td>no</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th> 公制 </th> 
   <th> 影响 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 浏览器支持 </td> 
   <td> 好 </td> 
  </tr> 
  <tr> 
   <td> 可及性 </td> 
   <td> 内容仍在阅读 </td> 
  </tr> 
  <tr> 
   <td> 布局受影响吗？ </td> 
   <td> 否-保留原始尺寸 </td> 
  </tr> 
  <tr> 
   <td> 需要渲染 </td> 
   <td> 组成 </td> 
  </tr> 
  <tr> 
   <td> 性能 </td> 
   <td> 最好，可以使用硬件加速 </td> 
  </tr> 
  <tr> 
   <td> 动画帧可能吗？ </td> 
   <td> 是 </td> 
  </tr> 
  <tr> 
   <td> 隐藏时触发事件？ </td> 
   <td> 没有 </td> 
  </tr> 
 </tbody> 
</table>

## 4. `clip-path` **(**4. `clip-path`**)** ##

The [`clip-path`][clip-path] property creates a clipping region that determines which parts of an element are visible. Using a value such as `clip-path: circle(0);` will completely hide the element.

[`clip-path`][clip-path]属性创建一个裁剪区域，该裁剪区域确定元素的哪些部分可见。 使用诸如`clip-path: circle(0);`的值`clip-path: circle(0);` 将完全隐藏该元素。

See the Pen [ hide with clip-path][hide with clip-path] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[隐藏与剪辑路径][hide with clip-path]由SitePoint( [@SitePoint][SitePoint] )上[CodePen][] 。

`clip-path` offers scope for interesting animations, although it should only be relied on in modern browsers.

`clip-path`为有趣的动画提供了范围，尽管仅在现代浏览器中应使用它。

<table> 
 <thead> 
  <tr> 
   <th>metric</th> 
   <th>effect</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>browser support</td> 
   <td>modern browsers only</td> 
  </tr> 
  <tr> 
   <td>accessibility</td> 
   <td>content still read by some applications</td> 
  </tr> 
  <tr> 
   <td>layout affected?</td> 
   <td>no — the original dimensions remain</td> 
  </tr> 
  <tr> 
   <td>rendering required</td> 
   <td>paint</td> 
  </tr> 
  <tr> 
   <td>performance</td> 
   <td>reasonable</td> 
  </tr> 
  <tr> 
   <td>animation frames possible?</td> 
   <td>yes, in modern browsers</td> 
  </tr> 
  <tr> 
   <td>events triggered when hidden?</td> 
   <td>no</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th> 公制 </th> 
   <th> 影响 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 浏览器支持 </td> 
   <td> 仅现代浏览器 </td> 
  </tr> 
  <tr> 
   <td> 可及性 </td> 
   <td> 内容仍被某些应用程序读取 </td> 
  </tr> 
  <tr> 
   <td> 布局受影响吗？ </td> 
   <td> 否-保留原始尺寸 </td> 
  </tr> 
  <tr> 
   <td> 需要渲染 </td> 
   <td> 涂料 </td> 
  </tr> 
  <tr> 
   <td> 性能 </td> 
   <td> 合理 </td> 
  </tr> 
  <tr> 
   <td> 动画帧可能吗？ </td> 
   <td> 是的，在现代浏览器中 </td> 
  </tr> 
  <tr> 
   <td> 隐藏时触发事件？ </td> 
   <td> 没有 </td> 
  </tr> 
 </tbody> 
</table>

## 5. `visibility` **(**5. `visibility`**)** ##

The [`visibility`][visibility] property can be set to `visible` or `hidden` to show and hide an element:

[`visibility`][visibility]属性可以设置为`visible`或`hidden`以显示和隐藏元素：

See the Pen [ hide with visibility: hidden][hide with visibility_ hidden] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[具有可见性][hide with visibility_ hidden]的笔[隐藏：][hide with visibility_ hidden]由CodePen上的SitePoint( [@SitePoint][SitePoint] ) [隐藏][CodePen] 。

The space used by the element remains in place unless a `collapse` value is used.

除非使用`collapse`值，否则元素使用的空间将保持不变。

<table> 
 <thead> 
  <tr> 
   <th>metric</th> 
   <th>effect</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>browser support</td> 
   <td>excellent</td> 
  </tr> 
  <tr> 
   <td>accessibility</td> 
   <td>content not read</td> 
  </tr> 
  <tr> 
   <td>layout affected?</td> 
   <td>no, unless <code>collapse</code> is used</td> 
  </tr> 
  <tr> 
   <td>rendering required</td> 
   <td>composition, unless <code>collapse</code> is used</td> 
  </tr> 
  <tr> 
   <td>performance</td> 
   <td>good</td> 
  </tr> 
  <tr> 
   <td>animation frames possible?</td> 
   <td>no</td> 
  </tr> 
  <tr> 
   <td>events triggered when hidden?</td> 
   <td>no</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th> 公制 </th> 
   <th> 影响 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 浏览器支持 </td> 
   <td> 优秀的 </td> 
  </tr> 
  <tr> 
   <td> 可及性 </td> 
   <td> 内容未读 </td> 
  </tr> 
  <tr> 
   <td> 布局受影响吗？ </td> 
   <td> 不，除非使用了<code>collapse</code> </td> 
  </tr> 
  <tr> 
   <td> 需要渲染 </td> 
   <td> 合成，除非使用<code>collapse</code> </td> 
  </tr> 
  <tr> 
   <td> 性能 </td> 
   <td> 好 </td> 
  </tr> 
  <tr> 
   <td> 动画帧可能吗？ </td> 
   <td> 没有 </td> 
  </tr> 
  <tr> 
   <td> 隐藏时触发事件？ </td> 
   <td> 没有 </td> 
  </tr> 
 </tbody> 
</table>

## 6. `display` **(**6. `display`**)** ##

[`display`][display] is probably the most-used element-hiding method. A value of `none` effectively removes the element as if it never existed in the DOM.

[`display`][display]可能是最常用的元素隐藏方法。 值为`none`有效删除元素，就好像它在DOM中不存在一样。

See the Pen [ hide with display: none][hide with display_ none] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[带有显示][hide with display_ none]的笔[隐藏：][hide with display_ none] [CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [没有显示][hide with display_ none] 。

However, it’s possibly the worst CSS property to use in the majority of cases. It can’t be animated and will trigger a page layout unless the element is moved out of the document flow using `position: absolute` or the new [`contain`][contain] property is adopted.

但是，在大多数情况下，它可能是最差CSS属性。 除非将元素使用`position: absolute`或采用新的[`contain`][contain]属性从文档流中移出，否则它将不能设置动画，并会触发页面布局。

`display` is also overloaded, with options such as `block`, `inline`, `table`, `flexbox`, `grid` and more. Resetting back to the correct value after `display: none;` can be problematic (although [`unset`][unset] may help).

`display`也会过载，包括`block` ， `inline` ， `table` ， `flexbox` ， `grid`等选项。 `display: none;`后重置为正确的值`display: none;` 可能会有问题(尽管未[`unset`][unset]可能会有所帮助)。

<table> 
 <thead> 
  <tr> 
   <th>metric</th> 
   <th>effect</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>browser support</td> 
   <td>excellent</td> 
  </tr> 
  <tr> 
   <td>accessibility</td> 
   <td>content not read</td> 
  </tr> 
  <tr> 
   <td>layout affected?</td> 
   <td>yes</td> 
  </tr> 
  <tr> 
   <td>rendering required</td> 
   <td>layout</td> 
  </tr> 
  <tr> 
   <td>performance</td> 
   <td>poor</td> 
  </tr> 
  <tr> 
   <td>animation frames possible?</td> 
   <td>no</td> 
  </tr> 
  <tr> 
   <td>events triggered when hidden?</td> 
   <td>no</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th> 公制 </th> 
   <th> 影响 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 浏览器支持 </td> 
   <td> 优秀的 </td> 
  </tr> 
  <tr> 
   <td> 可及性 </td> 
   <td> 内容未读 </td> 
  </tr> 
  <tr> 
   <td> 布局受影响吗？ </td> 
   <td> 是 </td> 
  </tr> 
  <tr> 
   <td> 需要渲染 </td> 
   <td> 布局 </td> 
  </tr> 
  <tr> 
   <td> 性能 </td> 
   <td> 较差的 </td> 
  </tr> 
  <tr> 
   <td> 动画帧可能吗？ </td> 
   <td> 没有 </td> 
  </tr> 
  <tr> 
   <td> 隐藏时触发事件？ </td> 
   <td> 没有 </td> 
  </tr> 
 </tbody> 
</table>

## 7. HTML `hidden`属性 **(**7. HTML `hidden` attribute**)** ##

The HTML [`hidden` attribute][hidden_ attribute] can be added to any element:

可以将HTML [`hidden`属性][hidden_ attribute]添加到任何元素：

<p hidden>
      Hidden content
    </p>

to apply the browser’s default style:

应用浏览器的默认样式：

[hidden] {
      display: none;
    }

This has the same benefits and flaws as [`display: none`][display_ none], although it could be useful when using a content management system that doesn’t permit style changes.

它具有与[`display: none`][display_ none]相同的优点和缺点[`display: none`][display_ none] ，尽管在使用不允许样式更改的内容管理系统时可能很有用。

## 8.绝对`position` **(**8. Absolute `position`**)** ##

The [`position`][position] property allows an element to be moved from its default `static` position within the page layout using [`top`][top], [`bottom`][bottom], [`left`][left], and [`right`][right]. An `absolute`\-positioned element can therefore be moved off-screen with `left: -999px` or similar:

[`position`][position]属性允许元素使用[`top`][top] ， [`bottom`][bottom] ， [`left`][left]和[`right`][right]从页面布局中的默认`static`位置移动。 因此， `absolute`位置的元素可以在屏幕外`left: -999px`移动`left: -999px`或类似位置：

See the Pen [ hide with position: absolute][hide with position_ absolute] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[位置][hide with position_ absolute]为笔的[皮革：位置][hide with position_ absolute]是CodePen上的SitePoint( [@SitePoint][SitePoint] ) [绝对][CodePen] 。

<table> 
 <thead> 
  <tr> 
   <th>metric</th> 
   <th>effect</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>browser support</td> 
   <td>excellent, unless using <code>position: sticky</code></td> 
  </tr> 
  <tr> 
   <td>accessibility</td> 
   <td>content still read</td> 
  </tr> 
  <tr> 
   <td>layout affected?</td> 
   <td>yes, if positioning is changed</td> 
  </tr> 
  <tr> 
   <td>rendering required</td> 
   <td>depends</td> 
  </tr> 
  <tr> 
   <td>performance</td> 
   <td>reasonable if careful</td> 
  </tr> 
  <tr> 
   <td>animation frames possible?</td> 
   <td>yes, on <code>top</code>, <code>bottom</code>, <code>left</code>, and <code>right</code></td> 
  </tr> 
  <tr> 
   <td>events triggered when hidden?</td> 
   <td>yes, but it may be impossible to interact with an off-screen element</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th> 公制 </th> 
   <th> 影响 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 浏览器支持 </td> 
   <td> 优秀，除非使用<code>position: sticky</code> </td> 
  </tr> 
  <tr> 
   <td> 可及性 </td> 
   <td> 内容仍在阅读 </td> 
  </tr> 
  <tr> 
   <td> 布局受影响吗？ </td> 
   <td> 是的，如果位置改变了 </td> 
  </tr> 
  <tr> 
   <td> 需要渲染 </td> 
   <td> 要看 </td> 
  </tr> 
  <tr> 
   <td> 性能 </td> 
   <td> 如果谨慎合理 </td> 
  </tr> 
  <tr> 
   <td> 动画帧可能吗？ </td> 
   <td> 是的，在<code>top</code> ， <code>bottom</code> ， <code>left</code>和<code>right</code> </td> 
  </tr> 
  <tr> 
   <td> 隐藏时触发事件？ </td> 
   <td> 是的，但是可能无法与屏幕外元素互动 </td> 
  </tr> 
 </tbody> 
</table>

## 9.覆盖另一个元素 **(**9. Overlay Another Element**)** ##

An element can be visually hidden by positioning another over the top which has the same color as the background. In this example, an `::after` pseudo-element is overlaid, although any child element could be used:

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

See the Pen [ hide with an overlay][hide with an overlay] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

在[CodePen][SitePoint]上[看到][CodePen] [带有][hide with an overlay] SitePoint( [@SitePoint][SitePoint] ) [覆盖][hide with an overlay]的笔[隐藏][hide with an overlay] [物][CodePen] 。

While technically possible, this option required more code than other options.

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

<table> 
 <thead> 
  <tr> 
   <th>metric</th> 
   <th>effect</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>browser support</td> 
   <td>excellent</td> 
  </tr> 
  <tr> 
   <td>accessibility</td> 
   <td>content still read</td> 
  </tr> 
  <tr> 
   <td>layout affected?</td> 
   <td>no, if absolutely positioned</td> 
  </tr> 
  <tr> 
   <td>rendering required</td> 
   <td>paint</td> 
  </tr> 
  <tr> 
   <td>performance</td> 
   <td>reasonable if careful</td> 
  </tr> 
  <tr> 
   <td>animation frames possible?</td> 
   <td>yes</td> 
  </tr> 
  <tr> 
   <td>events triggered when hidden?</td> 
   <td>yes, when a pseudo or child element is overlaid</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th> 公制 </th> 
   <th> 影响 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 浏览器支持 </td> 
   <td> 优秀的 </td> 
  </tr> 
  <tr> 
   <td> 可及性 </td> 
   <td> 内容仍在阅读 </td> 
  </tr> 
  <tr> 
   <td> 布局受影响吗？ </td> 
   <td> 不，如果绝对定位 </td> 
  </tr> 
  <tr> 
   <td> 需要渲染 </td> 
   <td> 涂料 </td> 
  </tr> 
  <tr> 
   <td> 性能 </td> 
   <td> 如果谨慎合理 </td> 
  </tr> 
  <tr> 
   <td> 动画帧可能吗？ </td> 
   <td> 是 </td> 
  </tr> 
  <tr> 
   <td> 隐藏时触发事件？ </td> 
   <td> 是的，当覆盖伪或子元素时 </td> 
  </tr> 
 </tbody> 
</table>

## 10.缩小尺寸 **(**10. Reduce Dimensions**)** ##

An element can be hidden by minimizing its dimensions using [`width`][width], [`height`][height], [`padding`][padding], [`border-width`][border-width] and/or [`font-size`][font-size]. It may also be necessary to apply [`overflow: hidden;`][overflow_ hidden] to ensure content doesn’t spill out.

可以通过使用[`width`][width] ， [`height`][height] ， [`padding`][padding] ， [`border-width`][border-width]和/或[`font-size`][font-size]最小化元素的尺寸来隐藏元素。 可能还需要应用[`overflow: hidden;`][overflow_ hidden] 确保内容不会溢出。

See the Pen [ hide with width or height][hide with width or height] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

看到笔[隐藏与宽度或高度][hide with width or height]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

Interesting animated effects are possible, but performance is noticeably better with `transform`.

有趣的动画效果是可能的，但是`transform`性能明显更好。

<table> 
 <thead> 
  <tr> 
   <th>metric</th> 
   <th>effect</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>browser support</td> 
   <td>excellent</td> 
  </tr> 
  <tr> 
   <td>accessibility</td> 
   <td>content still read</td> 
  </tr> 
  <tr> 
   <td>layout affected?</td> 
   <td>yes</td> 
  </tr> 
  <tr> 
   <td>rendering required</td> 
   <td>layout</td> 
  </tr> 
  <tr> 
   <td>performance</td> 
   <td>poor</td> 
  </tr> 
  <tr> 
   <td>animation frames possible?</td> 
   <td>yes</td> 
  </tr> 
  <tr> 
   <td>events triggered when hidden?</td> 
   <td>no</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th> 公制 </th> 
   <th> 影响 </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> 浏览器支持 </td> 
   <td> 优秀的 </td> 
  </tr> 
  <tr> 
   <td> 可及性 </td> 
   <td> 内容仍在阅读 </td> 
  </tr> 
  <tr> 
   <td> 布局受影响吗？ </td> 
   <td> 是 </td> 
  </tr> 
  <tr> 
   <td> 需要渲染 </td> 
   <td> 布局 </td> 
  </tr> 
  <tr> 
   <td> 性能 </td> 
   <td> 较差的 </td> 
  </tr> 
  <tr> 
   <td> 动画帧可能吗？ </td> 
   <td> 是 </td> 
  </tr> 
  <tr> 
   <td> 隐藏时触发事件？ </td> 
   <td> 没有 </td> 
  </tr> 
 </tbody> 
</table>

## 隐藏的选择 **(**Hidden Choices**)** ##

`display: none` has been the favorite solution to hide elements for many years, but it’s been superseded by more flexible, animatable options. It’s still valid, but perhaps only when you want to permanently hide content from all users. `transform` or `opacity` are better choices when considering performance.

`display: none`多年来， `display: none`是隐藏元素的最喜欢的解决方案，但是它已被更灵活，可设置动画的选项所取代。 它仍然有效，但可能仅在您要向所有用户永久隐藏内容时才有效。 考虑性能时， `transform`或`opacity`是更好的选择。

Take your CSS skills to the next level with [CSS Master][]. Learn CSS architecture, debugging, custom properties, advanced layout and animation techniques, how to use CSS with SVG, and more.

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

> 翻译自: [https://www.sitepoint.com/hide-elements-in-css/][https_www.sitepoint.com_hide-elements-in-css]

5种css隐藏元素的方法

[ARIA attributes]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
[prefers-reduced-motion]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
[opacity_ N]: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
[filter_ opacity_N]: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
[hide with opacity_ 0]: https://codepen.io/SitePoint/pen/vYOgMKx
[SitePoint]: https://codepen.io/SitePoint
[CodePen]: https://codepen.io
[color]: https://developer.mozilla.org/en-US/docs/Web/CSS/color
[background-color]: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
[border-color]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
[hide with color alpha]: https://codepen.io/SitePoint/pen/GRJrLNM
[linear-gradient]: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
[transform]: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
[hide with transform_ scale_0]: https://codepen.io/SitePoint/pen/PoqWgWE
[clip-path]: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
[hide with clip-path]: https://codepen.io/SitePoint/pen/wvagZJj
[visibility]: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
[hide with visibility_ hidden]: https://codepen.io/SitePoint/pen/YzXNMxV
[display]: https://developer.mozilla.org/en-US/docs/Web/CSS/display
[hide with display_ none]: https://codepen.io/SitePoint/pen/zYGNXEG
[contain]: https://developer.mozilla.org/en-US/docs/Web/CSS/contain
[unset]: https://developer.mozilla.org/en-US/docs/Web/CSS/unset
[hidden_ attribute]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
[display_ none]: https://www.sitepoint.com/hide-elements-in-css/#6-display
[position]: https://developer.mozilla.org/en-US/docs/Web/CSS/position
[top]: https://developer.mozilla.org/en-US/docs/Web/CSS/top
[bottom]: https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
[left]: https://developer.mozilla.org/en-US/docs/Web/CSS/left
[right]: https://developer.mozilla.org/en-US/docs/Web/CSS/right
[hide with position_ absolute]: https://codepen.io/SitePoint/pen/BaNpEmV
[hide with an overlay]: https://codepen.io/SitePoint/pen/zYGNXpG
[width]: https://developer.mozilla.org/en-US/docs/Web/CSS/width
[height]: https://developer.mozilla.org/en-US/docs/Web/CSS/height
[padding]: https://developer.mozilla.org/en-US/docs/Web/CSS/padding
[border-width]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
[font-size]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
[overflow_ hidden]: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
[hide with width or height]: https://codepen.io/SitePoint/pen/eYNgoVY
[CSS Master]: https://www.sitepoint.com/premium/books/css-master-2nd-edition?utm_source=blog&utm_medium=articles
[https_www.sitepoint.com_hide-elements-in-css]: https://www.sitepoint.com/hide-elements-in-css/