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>

打印页面