CSS - opacity 屬性

CSS opacity 屬性控制元素的不透明度。它決定了隱藏元素內容的可見程度。此屬性可用於各種元素，無論它們包含文字、影像還是用作背景。

語法

opacity: number | percentage | initial | inherit;

屬性值

值	描述
數字	可以使用 0 到 1（包括 0 和 1）之間的數值指定元素的不透明度。0 表示完全透明，1 表示完全不透明，0 到 1 之間的數值表示中間透明度。
百分比	可以使用百分比值指定元素的不透明度。0% 表示完全透明，100% 表示完全不透明，0% 到 100% 之間的數值表示中間透明度。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS 不透明度屬性示例

以下示例使用不同的值解釋了opacity 屬性。

使用數值的不透明度屬性

為了設定元素的透明度，我們可以將 0 到 1（包括 0 和 1）之間的數值指定給opacity 屬性。0 表示完全透明，而 1 表示完全不透明，0 到 1 之間的數值顯示中間透明度效果。以下示例中使用了這些值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .props {
         height: 50px;
         padding: 20px;
         text-align: center;
         font-weight: bold;
         font-size: 20px;
         background-color: lightgreen;
      }

      .first {
         opacity: 0.3;
      }

      .second {
         opacity: 0.6;
      }

      .third {
         opacity: 1;
      }
   </style>
</head>

<body>
   <h2>
      CSS opacity property
   </h2>
   <h4>
      opacity: 0.3
   </h4>
   <div class="props first">
      This div has opacity: 0.3
   </div>
   <h4>
      opacity: 0.6
   </h4>
   <div class="props second">
      This div has opacity: 0.6
   </div>
   <h4>
      opacity: 1
   </h4>
   <div class="props third">
      This div has opacity: 1
   </div>
</body>

</html>

使用百分比值的不透明度屬性

為了設定元素的透明度，我們可以將 0% 到 100%（包括 0% 和 100%）之間的百分比值指定給opacity 屬性。0% 表示完全透明，而 100% 表示完全不透明，0% 到 100% 之間的數值顯示中間透明度效果。以下示例中使用了這些值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .props {
         height: 50px;
         padding: 20px;
         text-align: center;
         font-weight: bold;
         font-size: 20px;
         background-color: lightgreen;
      }

      .first {
         opacity: 30%;
      }

      .second {
         opacity: 60%;
      }

      .third {
         opacity: 100%;
      }
   </style>
</head>

<body>
   <h2>
      CSS opacity property
   </h2>
   <h4>
      opacity: 30%
   </h4>
   <div class="props first">
      This div has opacity: 30%
   </div>
   <h4>
      opacity: 60%
   </h4>
   <div class="props second">
      This div has opacity: 60%
   </div>
   <h4>
      opacity: 100%
   </h4>
   <div class="props third">
      This div has opacity: 100%
   </div>
</body>

</html>

影像中的不透明度屬性

透明度效果也可以用於影像。在以下示例中，影像使用了不同的opacity 值來顯示效果。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .props {
         width: 300px;
         height: 150px;
      }

      .first-img {
         opacity: 0.1;
      }

      .second-img {
         opacity: 50%;
      }

      .third-img {
         opacity: 1;
      }
   </style>
</head>

<body>
   <h2>
      CSS opacity property
   </h2>
   <h4>
      opacity: 0.1
   </h4>
   <img class="first-img props" src="/css/images/logo.png" 
   alt="Tutorialspoint">
   <h4>
      opacity: 50%
   </h4>
   <img class="second-img props" src="/css/images/logo.png" 
   alt="Tutorialspoint">
   <h4>
      opacity: 1
   </h4>
   <img class="third-img props" src="/css/images/logo.png" 
   alt="Tutorialspoint">
</body>

</html>

使用 RGBA 顏色值的不透明度屬性

opacity 屬性將透明度應用於元素及其子元素。在許多情況下，這可能並不理想，因為所有子元素也變得透明。為了避免這種情況並仍然實現透明度，我們可以使用rgba 值。這些值僅指定元素的顏色和不透明度，而不是其子元素。以下示例中使用了這些值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         width: 200px;
         padding: 10px;
         text-align: center;
      }

      .first-color {
         background-color: rgba(77, 77, 255);
      }

      .decimal-opacity1 {
         opacity: 0.1;
      }

      .decimal-opacity2 {
         opacity: 0.3;
      }

      .decimal-opacity3 {
         opacity: 0.6;
      }

      .decimal-opacity4 {
         opacity: 0.9;
      }

      .rgba-opacity1 {
         background-color: rgba(77, 77, 255, 0.1);
      }

      .rgba-opacity2 {
         background-color: rgba(77, 77, 255, 0.3);
      }

      .rgba-opacity3 {
         background-color: rgba(77, 77, 255, 0.6);
      }

      .rgba-opacity4 {
         background-color: rgba(77, 77, 255, 0.9);
      }

      .container {
         font-weight: bolder;
         margin-left: 50px;
         float: left;
      }
   </style>
</head>

<body>
   <h2>
      CSS opacity property
   </h2>
   <p>
      It is clear from the 
   <strong>
      transparent element
   </strong> 
      portion below, that the opacity property is 
      applied to all other elements present within 
      the element that uses opacity property. 
   </p>
   <p>
      To prevent this, we can make use of the 
   <strong>
      rgba values
   </strong> 
      which define the color along with opacity. The 
      opacity is applied only to the particular element 
      and not to the elements present within it.
   </p>
   <div class="container">
      <h4>
         Tranparent element
      </h4>
      <div class=" first-color decimal-opacity1">
         CSS Opacity 0.1
      </div>
      <div class="first-color decimal-opacity2">
         CSS Opacity 0.3
      </div>
      <div class="first-color decimal-opacity3">
         CSS Opacity 0.6
      </div>
      <div class="first-color decimal-opacity4">
         CSS Opacity 0.9
      </div>
   </div>
   <div class="container">
      <h4>
         With RGBA color values
      </h4>
      <div class="rgba-opacity1">
         CSS Opacity 10%
      </div>
      <div class="rgba-opacity2">
         CSS Opacity 30%
      </div>
      <div class="rgba-opacity3">
         CSS Opacity 60%
      </div>
      <div class="rgba-opacity4">
         CSS Opacity 90%
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
opacity	4.0	9.0	2.0	3.1	9.0

css_properties_reference.htm

列印頁面