資料結構
網路
關係資料庫管理系統
作業系統
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+ 瀏覽量
廣告