数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS3 透明度和渐变
线性渐变用于以线性格式（如从上到下）排列两种或多种颜色。要添加透明度，请使用 RGBA() 函数并定义颜色停止点。至少应提及两个颜色停止点。让我们首先看看语法。
语法
以下是创建线性渐变的语法：
background-image: linear-gradient(dir, colorStop1, colorStop2, colorStop3, ...);
上面，dir 是方向，即来自：
从左到右
从右到左
对角线
从上到下
从右到左开始的线性渐变
以下是使用 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>
<p>The above linear gradient goes from dark blue purple to white</p>
</body>
</html>
从左到右开始的线性渐变
以下是使用 CSS3 设置透明线性渐变的代码。此处的线性渐变从左侧开始。它以一种颜色开始，然后逐渐变为完全透明：
示例
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-image: linear-gradient(
to right,
rgba(255,0,0,0),
rgba(0,0,255,1)
);
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<p>The above linear gradient goes from being complete transparent to blue.</p>
</body>
</html>
从左上角到右下角（对角线）开始的线性渐变
以下是使用 CSS3 设置透明线性渐变的代码。此处的线性渐变从左上角开始，到右下角形成对角线。它从绿色开始，渐变到橙色：
示例
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-color: green;
background-image: linear-gradient(to bottom right, green, orange);
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<p>The above linear gradient goes from green to orange</p>
</body>
</html>
从上到下开始的线性渐变
以下是使用 CSS3 设置透明线性渐变的代码。此处的线性渐变从顶部开始。从橙色渐变到红色：
示例
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 200px;
background-color: orange;
background-image: linear-gradient(orange, red);
}
</style>
</head>
<body>
<h1>Linear Gradient with transparency</h1>
<div class="linearGradient"></div>
<p>The above linear gradient goes from orange to red</p>
</body>
</html>
更新于： 2023年10月31日
3K+ 浏览量
广告