CSS 数据类型

CSS <alpha-value> 数据类型确定颜色的透明度或 Alpha 通道。它可以是 <number>（介于 0 和 1 之间）或 <percentage>（介于 0% 和 100% 之间）。

可能的值

  • <number> - 它表示 0（完全透明）到 1 之间的十进制数。0（完全不透明）。

  • <percentage> - 它表示 0%（完全透明）和 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) 且 Alpha 通道为 70% 的颜色，表示不透明度。
<html>
<head>
<style>
   h3 {
      color: rgba(255, 0, 0, 0.6);
   }
   h4 {
      color: rgba(109 101 233 / 70%);
   }
</style>
</head>
<body>
    <h3>带有数值的文本颜色不透明度。</h3>
    <h4>带有百分比值的文本颜色不透明度。</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("/css/images/pink-flower.jpg");    
      color: yellow;
      shape-image-threshold: 0.8; 
   }
</style>
</head>
<body>
   <div class="img-container">
      <h1>此文本将环绕图像的形状。</h1>
   </div>
</body>
</html>