如何使用CSS为division元素设置不透明度级别

在本文中，我们将使用CSS设置元素的不透明度。不透明度是描述元素透明度的属性。

不透明度属性用于描述元素的透明度。不透明度的值介于0.0到1.0之间，其中较低的值表示较高的透明度，较高的值表示较低的透明度。不透明度的百分比计算公式为不透明度% = 不透明度 * 100。

示例1： 此示例使用CSS样式标签使用ID选择器为HTML元素指定不透明度的值。

<style> 
    body { 
        text-align: center; 
    } 
      
    h1 { 
        color: green; 
    } 
      
    .GFG { 
        opacity: 0.5; 
    } 
</style> 
  
<h1>GeeksforGeeks</h1> 
  
<h3> 
    How to set the opacity level for 
    <br>a division element using CSS? 
</h3> 
  
<div class="GFG"> 
    Welcome to GeeksforGeeks 
</div>

输出：

示例2： 此示例使用Javascript函数和CSS样式标签来设置HTML元素的不透明度。

<style> 
    body { 
        text-align: center; 
    } 
      
    h1 { 
        color: green; 
    } 
</style> 
  
<script> 
    function fun() { 
        document.getElementById("GFG") 
            .style.opacity = "0.5"; 
    }  
</script> 
  
<h1>GeeksforGeeks</h1> 
  
<h3> 
    How to set the opacity level for 
    <br>a division element using CSS? 
</h3> 
  
<div id="GFG"> 
    Welcome to GeeksforGeeks 
</div> 
  
<button type="button" onclick="fun()"> 
    Submit 
</button>

输出: