使用 CSS 隐藏元素的不同方法

在处理 UI/UX 时，我们必须处理网页上出现的每个 Web 元素，以使用户体验更轻松。在设计此类页面时，我们经常需要在任何事件或任何特定时间间隔内隐藏或显示一些特定的 HTML 元素。在本文中，我们可以通过几行 javascript 代码轻松地做到这一点，但在本文中，我们将了解有多少种方法可以仅使用 CSS 来隐藏 HTML 元素。

有以下 CSS 属性用于隐藏元素。

1. 绝对位置
2. 颜色
3. 剪辑路径
4. 展示
5. 筛选
6. 测量
7. 不透明度
8. 转变
9. 能见度

我们将看到上面提到的所有隐藏元素的方法以及 CSS 代码。

1. 绝对位置：当我们在 CSS 中为一个元素使用 Position: absolute 属性时，它只是意味着该元素的位置固定在其父容器中，如果没有可用的容器，则将文档正文用作其父容器容器。现在我们可以使用 Top、Bottom、Left、Right 属性来更改该元素的位置。我们将使用这些属性之一来隐藏文档正文中的元素。

示例：在此示例中，我们将通过将文本元素从屏幕中移出来隐藏它。我们将 h1 标签的位置设置为绝对位置，然后单击按钮，我们将添加一个类，我们将在其中使用 left 属性并将值设置为 -999px。通过这样做，文本将从显示器中移出。我们还可以使用其他 Top、Bottom 和 Right 属性来隐藏文档中的元素。

HTML

  

    
    
  
    
        body {
            background-color: rgb(37, 37, 37);
        }
  
        h1 {
            font-size: 3rem;
            color: green;
            position: absolute;
        }
  
        p {
            color: white;
        }
  
        h1.hide {
            left: -999px;
        }
    

  

    
        This button will hide the text element 
        by moving out the element from the screen.
    
  
    Hide
  
    
        GeeksForGeeks
    
      
    
        $("#btn").click(function () {
  
            $("h1").addClass("hide");
        });
    

  

输出：

2. 颜色属性也可用于通过使元素透明来使元素不可见，我们将使用 Alpha 通道应用颜色。我们可以通过以下方法设置 alpha 通道。

1. 颜色：透明
2. 颜色：hsla（色相、饱和度、亮度、alpha）；
3. 颜色：rgba（红、绿、蓝、阿尔法）；
4. 颜色：#RRGGBBAA
5. 颜色：#RBGA

注意：我们还可以使用除颜色之外的这些值，例如背景颜色、边框颜色、背景等。

示例：在此示例中，我们将通过使其透明来隐藏元素。

HTML

  

    
    
  
    
        body {
            background-color: rgb(37, 37, 37);
        }
  
        h1 {
            font-size: 3rem;
            color: rgb(255, 255, 255);
        }
  
        p {
            color: white;
        }
  
        h1.hide {
            color: transparent;
        }
    

  

  
    
        This button will set the text element 
        color to the transparent and the text 
        will be hidden.
    
  
    Hide
  
    
        GeeksForGeeks
    
      
    
        $("#btn").click(function () {
  
            $("h1").addClass("hide");
        });
    

  

输出：

3. Clip-path 属性：该属性用于根据给定的形状创建剪裁原因，我们将使用该属性隐藏元素。 Clip-path 属性有各种值，其中之一是 circle()。当我们使用clip-path: circle(0)时，特定元素将被完全隐藏。

示例：在此示例中，我们将使用 clip-path 属性隐藏一个 div，我们将使用值 circle() 之一并将其设置为 circle(0)。通过这样做，它将完全剪掉 div 并且 div 将被隐藏。

HTML

  

    
    
  
    
        body {
            background-color: rgb(37, 37, 37);
        }
  
        .rect {
            margin: 20px;
            height: 100px;
            width: 100px;
            background-color: #fff;
        }
  
        p {
            color: white;
        }
  
        .rect.hide {
            clip-path: circle(0);
        }
    

  

  
    
        This button will hide the text by 
        clipping it in a circular shape to 
        the zero value.
    
  
    Hide
  
    
        
    
      
    
        $("#btn").click(function () {
  
            $(".rect").addClass("hide");
        });
    

  

输出：

4. display 属性： CSS 的 display 属性也可以用来对 DOM 隐藏元素。我们将使用它的值之一，即Display: none，这可能是从页面中隐藏 HTML 元素最常用的属性。

示例：使用 display: none 隐藏元素。

HTML

  

    
    
  
    
        body {
            background-color: rgb(37, 37, 37);
        }
  
        h1 {
            font-size: 3rem;
            color: rgb(24, 255, 63);
            border: 1px solid green;
            width: 17%;
        }
  
        p {
            color: white;
        }
  
        h1.hide {
            display: none;
        }
    

  

  
    
        This button will hide the text 
        element by adding the class 
        which specify "display:none" 
        property
    
  
    Hide
      
    
        GeeksForGeeks
    
  
    
        $("#btn").click(function () {
            $("h1").addClass("hide");
        });
    

  

输出：

5. 过滤器： CSS 中的过滤器属性用于对 HTML 元素应用一些图形失真。 Filter 属性有几个值，但为了隐藏元素，我们将使用它是称为opacity()的属性之一。顾名思义，它会做什么，我们将使用最低的不透明度值来使元素透明，这样就可以隐藏任何特定的元素。

示例：使用过滤器隐藏元素：opacity() 属性。

HTML

  

    
    
  
    
        body {
            background-color: rgb(37, 37, 37);
        }
  
        h1 {
            font-size: 3.5rem;
            color: rgb(24, 255, 63);
            border: 1px solid green;
            width: 20%;
        }
  
        p {
            color: white;
        }
  
        h1.hide {
            filter: opacity(0);
        }
    

  

  
    
        This button will hide the text by 
        making its opacity to the zero.
    
  
    Hide
      
    
        GeeksForGeeks
    
  
    
        $("#btn").click(function () {
            $("h1").addClass("hide");
        });
    

  

输出：

6. 测量：这也可能是隐藏任何元素的最简单方法之一。我们将借助高度、宽度、字体大小等属性来减小元素的尺寸。请注意，当我们使用尺寸来减小或完全隐藏元素时，不要忘记使用溢出：隐藏属性，以便元素的完整内容被隐藏。

示例：通过减小其尺寸来隐藏元素。

HTML

  

    
    
  
    
        body {
            background-color: rgb(37, 37, 37);
        }
  
        h1 {
            font-size: 5rem;
            color: rgb(24, 255, 63);
            width: 20%;
        }
  
        p {
            color: white;
        }
  
        h1.hide {
            height: 0px;
            width: 0px;
            overflow: hidden;
        }
    

  

    
        This button will hide the text by 
        reducing its dimension to the zero
    
  
    Hide
      
    
        GeeksForGeeks
    
  
    
        $("#btn").click(function () {
            $("h1").addClass("hide");
        });
    

  

输出：

7、不透明度：我们可以直接使用CSS中的opacity属性给元素应用透明效果。我们将使用从 0 到 1 的不透明度值或从 0% 到 100% 的百分比。但在这种情况下，我们将使用opacity(0)或opacity(0%)使元素透明或完全隐藏元素。

示例：通过将不透明度设置为 0 来隐藏元素。

HTML

  

    
    
  
    
        body {
            background-color: rgb(37, 37, 37);
        }
  
        h1 {
            font-size: 5rem;
            color: rgb(24, 255, 63);
            width: 20%;
        }
  
        p {
            color: white;
        }
  
        h1.hide {
            opacity: 0;
        }
    

  

    
        This button will hide the text by 
        making opacity of the text 0
    
  
    Hide
      
    
        GeeksForGeeks
    
  
    
        $("#btn").click(function () {
            $("h1").addClass("hide");
        });
    

  

输出：

8、Transform： CSS的transform属性可以用来缩放、旋转、移动HTML元素。为了从文档中隐藏元素，我们将使用 scale() 隐藏元素。 scale() 方法将有助于设置元素的大小，因此我们可以通过使用 scale() 的最小值来完全隐藏元素。

示例：使用 Transform: scale() 隐藏元素。

HTML

  

    
    
  
    
        body {
            background-color: rgb(37, 37, 37);
        }
  
        .crcl {
            margin: 20px;
            height: 200px;
            width: 200px;
            border-radius: 100px;
            background-color: #fff;
        }
  
        p {
            color: white;
        }
  
        .crcl.hide {
            transform: scale(0);
        }
    

  

  
    
        This button will hide the shape 
        by making thier scale to the zero.
    
  
    Hide
      
    
        
    
  
    
        $("#btn").click(function () {
            $(".crcl").addClass("hide");
        });
    

  

输出：

9.可见性：这个属性只有隐藏和可见两个值。为了从页面中隐藏元素，我们将简单地使用可见性：隐藏。这是从 DOM 中隐藏 HTML 元素的最简单方法之一。

示例：具有可见性的隐藏元素：隐藏属性

HTML

  

    
    
  
    
        body {
            background-color: rgb(37, 37, 37);
        }
  
        .crcl {
            margin: 20px;
            height: 200px;
            width: 200px;
            border-radius: 100px;
            background-color: rgb(3, 134, 10);
        }
  
        p {
            color: white;
        }
  
        .crcl.hide {
            visibility: hidden;
        }
    

  

    
        This button will hide the shape by 
        the property visibility: hidden
    
  
    Hide
      
    
        
    
  
    
        $("#btn").click(function () {
            $(".crcl").addClass("hide");
        });
    

  

输出：