数据结构
网络
关系数据库管理系统 (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.com/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.com/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.com/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 次浏览
广告