CSS3 透明度和渐变

cssweb developmentfront end technology更新于 2025/12/10 18:52:17

线性渐变用于以线性格式(例如从上到下)排列两种或多种颜色。要添加透明度，请使用 RGBA() 函数并定义色标。

以下是使用 CSS3 设置透明线性渐变的代码 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
   height: 200px;
   background-image: linear-gradient(
      to left,
      rgb(111, 0, 255),
      rgba(111, 0, 255, 0.616),
      rgba(111, 0, 255, 0.384),
      rgba(111, 0, 255, 0)
   );
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<h2>The above linear gradient goes from white to dark blue purple</h2>
</body>
</html>