如何使用 CSS 制作透明网页？

您可以使用以下方法轻松制作透明网页 这 不透明度 HTML 中的属性。您只需在 0.0 到 1.0 之间调整不透明度值，其中低值表示高透明度，高值表示低透明度。

为了使任何元素透明，您需要向元素的父元素添加 CSS opacity 属性。

您可以使用两种方式制作透明网页。

• 透明框：使用不透明度为元素的背景添加透明度，使其所有子元素继承相同的透明度。
• 使用 RGBA 值的透明度：应用 opacity 属性只为元素的背景添加透明度。

示例 1：在下面的示例中，当向透明度框添加不透明度时，其子元素也最终具有透明度，但是当使用rgba使用透明度时，它仅向背景元素添加透明度。因此，让我们将透明度属性添加到我们的网页中。

HTML

  

    

  

    
        
GeeksforGeeks
  
        

            
Transparency Box
        
        

            
Transparency Using RGBA value
        
    

  

输出：

使用 opacity 属性值的透明度

示例 2：按照步骤创建透明网页，例如制作透明登录表单。

• 第 1 步：添加 HTML。添加电子邮件、密码和登录按钮的输入。在它们周围包裹一个“表单”元素来处理输入。

• 第 2 步：添加所需的 CSS 以使用登录表单的 RGBA 值设计透明登录页面，如上所述。 CSS 属性如linear-gradient和box-shadow以达到预期的效果。

HTML

  

    

  

    
        
GeeksforGeeks
  
        

            

             
            

            Login
        
    

  

输出：