資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS 設定位置顏色漸變
要建立線性漸變，請使用 `background-image` 屬性的 `linear-gradient()` 方法。
語法
以下是語法：
background-image: linear-gradient(angle, color-stop1, color-stop2);
顏色漸變停止點的位置可以設定為百分比或絕對長度。例如，對於線性漸變，顏色停止點是您希望為平滑過渡設定的顏色：
background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );
漸變也可以使用 `url()` 與 `linear-gradient()` 一起在影像上設定：
background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ), url("https://tutorialspoint.tw/assets/profiles/123055/profile/200_187394-1565938756.jpg");
以下是一些使用 CSS 線上性漸變中設定位置顏色停止點的示例：
顏色停止點均勻間隔
在此示例中，顏色停止點使用百分比均勻間隔：
background-image: linear-gradient( rgb(61, 255, 2), rgb(0, 174, 255), rgb(255, 29, 29) );
示例
讓我們看看這個示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
height: 100px;
background-image: linear-gradient(
rgb(61, 255, 2),
rgb(0, 174, 255),
rgb(255, 29, 29)
);
}
</style>
</head>
<body>
<h1>Linear gradient location color stops</h1>
<h3>Evenly Spaced</h3>
<div></div>
</body>
</html>
顏色停止點不均勻間隔
在此示例中，顏色停止點使用百分比不均勻間隔，即：
background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );
示例
讓我們看看這個示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
height: 100px;
background-image: linear-gradient(
rgb(61, 255, 2) 40%,
rgb(0, 174, 255) 80%,
rgb(255, 29, 29) 20%
);
}
</style>
</head>
<body>
<h1>Linear gradient location color stops</h1>
<h3>Unevenly Spaced</h3>
<div></div>
</body>
</html>
設定線性漸變的顏色
以下是使用 CSS 中的角度設定線性漸變方向的程式碼。顏色停止點也已設定：
.linearGradient {
background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
}
.linearGradient1 {
background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
}
示例
這是一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
height: 200px;
width: 300px;
display: inline-block;
margin-right: 10px;
}
.linearGradient {
background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
}
.linearGradient1 {
background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient direction using angles</h1>
<div class="linearGradient"></div>
<div class="linearGradient1"></div>
</body>
</html>
使用顏色停止點設定線性漸變的角度
首先設定線性漸變的角度，然後是顏色停止點：
Spain:lang(es){
background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
.Italy:lang(it){
background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
.Germany:lang(nl){
background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
示例
這是一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
padding: 10px;
text-align: center;
border: 1px solid black;
}
.Italy:lang(it)::after {
padding: 20px;
content: '~ Italy';
font-style: italic;
}
.Spain:lang(es)::after {
padding: 8px;
content: '~ Spain';
font-style: italic;
}
.Germany:lang(nl)::after {
padding: 20px;
content: '~ Belgium';
font-style: italic;
}
.Spain:lang(es){
background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
.Italy:lang(it){
background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
.Germany:lang(nl){
background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div class="Italy" lang='it'>Rome</div>
<div class="Germany" lang='nl'>Brussels</div>
<div class="Spain" lang='es'>Madrid</div>
</body>
</html>
為背景影像設定帶顏色停止點的漸變
使用 `background-image` 屬性和值 `linear-gradient()` 設定線性漸變。使用 `url()` 設定影像：
background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ), url("https://tutorialspoint.tw/assets/profiles/123055/profile/200_187394-1565938756.jpg");
示例
讓我們看看這個示例：
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
height: 100%;
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 60px;
font-weight: bolder;
}
.heroContainer {
background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ),
url("https://tutorialspoint.tw/assets/profiles/123055/profile/200_187394-1565938756.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.heroCaption {
text-align: center;
position: absolute;
top: 20%;
left: 45%;
color: white;
}
.heroCaption button {
border: none;
outline: none;
display: inline-block;
padding: 20px;
color: rgb(255, 255, 255);
opacity: 0.8;
font-size: 20px;
background-color: rgb(47, 151, 21);
text-align: center;
cursor: pointer;
}
.heroCaption button:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="heroContainer">
<div class="heroCaption">
<h1>I am Amit</h1>
<h2>And I'm an Entrepreneur</h2>
<button>Contact Me</button>
</div>
</div>
</body>
</html>
更新於: 2023-12-27
142 次瀏覽
廣告