CSS 資料型別 - <alpha-value>

CSS <alpha-value> 資料型別決定顏色的透明度或 alpha 通道。它可以是 <number>（介於 0 和 1 之間）或 <percentage>（介於 0% 和 100% 之間）。

可能的值

<number> − 它表示介於 0（完全透明）到 1（完全不透明）之間的十進位制數。
<percentage> − 它表示介於 0%（完全透明）和 100%（完全不透明）之間的百分比。

語法

<alpha-value> = number | percentage;

CSS <alpha-value> - 文字顏色透明度

下面的例子演示了使用帶數字和百分比值的 rgba() 函式的不同標題元素，以檢查文字顏色的透明度。在下面的例子中 -

rgba(255, 0, 0, 0.6) 表示具有 RGB 分量 (255, 0, 0) 的顏色，第四個值 (0.6) 表示 alpha 通道或透明度。
rgba(109, 101, 233, 70%) 表示具有 RGB 分量 (109, 101, 233) 和 70% alpha 通道的顏色，表示透明度。

<html>
<head>
<style>
   h3 {
      color: rgba(255, 0, 0, 0.6);
   }
   h4 {
      color: rgba(109 101 233 / 70%);
   }
</style>
</head>
<body>
   <h3>Text color opacity with number value.</h3>
   <h4>Text color opacity with percentage value.</h4>
</body>
</html>

CSS <alpha-value> - shape-image-threshold 屬性

下面的例子演示了 shape-image-threshold 屬性的使用，該屬性設定 alpha 通道閾值以確定影像的形狀 -

<html>
<head>
<style>
   .img-container {
      width: 400px;
      height: 200px;
      background-image: url("images/pink-flower.jpg");    
      color: yellow;
      shape-image-threshold: 0.8; 
   }
</style>
</head>
<body>
   <div class="img-container">
      <h1>This text will wrap around the shape of the image.</h1>
   </div>
</body>
</html>

列印頁面