CSS隐藏元素的10种技巧

在网站开发过程中，有很多情况下你可能都想控制网站上某些元素的可见性。本文将深入探讨使用 CSS 隐藏内容的十种不同 *** ，并考虑到各种使用情况。

隐藏元素的具体行为可能因您的需求而异。你可能想了解为隐藏对象预留空间的 *** ，或者将其从布局中完全删除的 *** 。此外，”隐藏” 一词可以指多种操作，例如使元素不可见、从布局中删除或降低其不透明度。很难想象会有如此多的可能性，但下面的十个部分将向你展示在 CSS 中隐藏元素的不同 *** ！

1. Display 属性

CSS 中的 display 属性用于指定元素的呈现框类型。将 display 属性设置为 none 会完全隐藏元素。语法：

.hidden {
display: none;
}

下面是如何使用 display *** 隐藏元素的代码示例：

<br /> See the Pen <a href="https://www.wbolt.com/go?_=f2c2dABFa0aHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9XtlBXeUJO" rel="noopener noreferrer nofollow" target="_blank"><br /> display:none element</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />
这是一个有用的工具，但它可能会使 CSS 代码复杂化，因为在某些情况下需要更精细的控制，如果使用不当，可能会造成意想不到的布局混乱。

2. Visibility 属性

visibility 属性允许你显示或隐藏一个元素，同时保持它在布局中的位置不变，这意味着当使用可见性隐藏一个元素时，它仍然占用文档中的空间。语法

.hidden {
visibility: hidden;
}

下面是一个使用 hidden 属性的可见性 *** 隐藏元素的示例。

<br /> See the Pen <a href="https://www.wbolt.com/go?_=96564c6098aHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9FeHJKUnp2" rel="noopener noreferrer nofollow" target="_blank"><br /> visiblity:hidden</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

在所提供的代码中，div 元素在视觉上被隐藏，但仍保留在卡片的结构中，且此操作不会影响卡片布局。

3. Opacity 属性

CSS 中的 opacity 属性用于设置元素的不透明度级别。通过它，你可以调整元素的透明度，使其可见或不可见。该功能可影响元素的视觉效果，而不会将其从布局中移除。不透明度为 0 时，元素会完全透明，从而有效地隐藏它。语法

.hidden {
opacity: 0;
}

下面是一个如何使用不透明度 *** 隐藏元素的示例：

<br /> See the Pen <a href="https://www.wbolt.com/go?_=bb292c07a3aHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9iR3pKS1Bi" rel="noopener noreferrer nofollow" target="_blank"><br /> opacity</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />
将不透明度设为 0 会使元素变得透明，但仍占用布局空间。

4. Transform 属性

在 CSS 中，transform 属性可更改 HTML 元素的外观和布局，并可让您应用缩放、旋转和平移项目等变换。该属性通常用于创建动画和特效。将 transform 属性设置为 scale(0) ，可以隐藏元素。语法

.hidden {
transform: scale(0);
}

下面是一个如何使用 CSS 技巧隐藏元素的示例：

<br /> See the Pen <a href="https://www.wbolt.com/go?_=753c87460baHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9aRXdaUmRC" rel="noopener noreferrer nofollow" target="_blank"><br /> transfrom</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

当使用 transform 属性隐藏元素时，屏幕阅读器仍可读取其内容。

5. Clip-path 属性

clip-path CSS 属性定义了一个剪切区域，用于隐藏元素的部分内容。这是一种通过绘制各种形状（如圆形或多边形）来隐藏或显示元素部分内容的好 *** 。剪切路径可以创建出吸引人的视觉效果，例如圆形图片或自定义形状的对象。语法：

.hidden {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

下面是一个如何使用 clip-path 隐藏元素的示例：

<br /> See the Pen <a href="https://www.wbolt.com/go?_=57d36b631aaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9KanhWWlFN" rel="noopener noreferrer nofollow" target="_blank"><br /> clip-path</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

在上述代码中，clip-path 属性被设置为一个有四个点的多边形，所有点都位于原点 (0, 0)，从而有效地隐藏了元素。使用 clip-path 隐藏元素的效率相对较高，因为它可以剪切可见区域，而不会对布局或渲染性能造成明显影响。

6. Position ***

position *** 利用 CSS 的 position 属性（尤其是 position：绝对或固定），将元素从通常的页面流程中移除。使用顶部、底部、左侧和右侧值，你可以移动元素在网页布局中的默认位置。

.hidden {
position: abSOLute;
left: -9999px;
}

下面是一个如何使用 position *** 隐藏元素的示例：

<br /> See the Pen <a href="https://www.wbolt.com/go?_=529ad36730aHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9HUnpMR2J6" rel="noopener noreferrer nofollow" target="_blank"><br /> position</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

在上例中，通过指定一个值（如 left: -9999px ），将 div 元素移出屏幕。这种 *** 可将元素放置在视口之外，从而有效地隐藏它。一般来说，这种 *** 很有效，但要小心元素会移动布局。

7. Color 属性

CSS 中的颜色属性是在 CSS 中隐藏元素的另一种 *** 。它通过单独调整颜色、背景颜色和边框颜色参数来实现。零 alpha 通道（如 rgba(0,0,0,0) ）或类似参数可使元素透明。

.hidden {
color: rgba(0,0,0,0);
background-color:rgba(0,0,0,0);
}

下面是一个如何使用颜色属性隐藏文本的示例：

<br /> See the Pen <a href="https://www.wbolt.com/go?_=5876368f39aHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9aRXdaUmdC" rel="noopener noreferrer nofollow" target="_blank"><br /> color</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

颜色属性是隐藏文本的有效 *** 。它不会对性能产生重大影响。值得注意的是，虽然这种 *** 在可视化显示中隐藏了文本，但用户仍可使用鼠标光标高亮显示隐藏的文本。元素本身仍保留其交互属性。因此，颜色 *** 可以隐藏文本内容，使其不可见，但可以进行选择和交互。

8. Measurement ***

measurement *** 是一种通过调整项目大小或尺寸来隐藏项目的 CSS 技术。它的工作原理是缩小 height, width, 和 overflow 属性的尺寸。将这些属性设置为 0，就能有效隐藏元素。

.hidden {
height: 0;
width: 0;
overflow:hidden
}

下面是一个如何使用 measurement 隐藏元素的示例：

<br /> See the Pen <a href="https://www.wbolt.com/go?_=a744257817aHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9KanhWWmdN" rel="noopener noreferrer nofollow" target="_blank"><br /> measurement</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

将 width 和 height 设为 0 可以有效隐藏元素，但仍占用布局空间。

9. Filter ***

filter *** 是一种 CSS 技术，通过利用 “filter” 属性隐藏或可视化操作组件。”opacity” 过滤器主要用于调整项目的透明度，使其完全或部分半透明。语法：

.hidden {
filter: opacity(0); 
}

下面是一个使用 filter *** 隐藏元素的示例：

<br /> See the Pen <a href="https://www.wbolt.com/go?_=a5e1ee40caaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9HUnpMR1Z6" rel="noopener noreferrer nofollow" target="_blank"><br /> filter</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

使用 filter 模糊元素可以在视觉上隐藏它。性能取决于 filter 的复杂程度，简单的 filter 效率更高。

10. 叠加使用 ::after 伪元素

元素叠加是一种将一个元素放在另一个元素之上以隐藏其下内容的 *** 。使用 ::after 伪元素是创建覆盖的常用 *** 。语法：

.hidden::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1;
}

下面是一个如何使用 ::after 伪元素隐藏元素的示例：

<br /> See the Pen <a href="https://www.wbolt.com/go?_=477d98136baHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25nL3Blbi9NV0xSQmdq" rel="noopener noreferrer nofollow" target="_blank"><br /> ::after</a> by Mr. Kwong (<a href="https://www.wbolt.com/go?_=dd7bb526eeaHR0cHM6Ly9jb2RlcGVuLmlvL01yLUt3b25n" rel="noopener noreferrer nofollow" target="_blank">@Mr-Kwong</a>)<br /> on <a href="https://www.wbolt.com/go?_=09e7f4459caHR0cHM6Ly9jb2RlcGVuLmlv" rel="noopener noreferrer nofollow" target="_blank">CodePen</a>.<br />

该伪元素的绝对位置是覆盖整个卡片。只有点击 card2 元素按钮时，才会出现覆盖效果。使用 ::after 伪元素覆盖元素可以提高效率。视觉效果也很好，就到这里吧，小伙计们！

小结

在 CSS 中隐藏元素是网页开发中常见且必不可少的一部分。你所选择的 *** 取决于具体的使用情况，包括你是想将元素从文档流中完全移除，还是在保留其布局空间的同时将其隐藏。了解这十种使用 CSS 隐藏元素的 *** ，可以改善用户体验，创建更具活力和交互性的网页。尝试使用这些技术，以确定哪种 *** 最适合你的项目要求。