Home >Web Front-end >CSS Tutorial >How to set transparency gradient in css
How to set transparency gradient in css: first create an HTML sample file; then introduce images into the body; finally use the "linear-gradient()" function and cooperate with rgba to set the transparency gradient.
The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.
css sets transparency gradient
In CSS, you can use the linear-gradient() function together with rgba() to set the transparency gradient. The linear-gradient() function is used to set the gradient, and the rgba() setting is used to set the color transparency.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片透明度渐变实例演示</title>
<style>
.div1 {
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(1.jpg)
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: url(1.jpg)
}
</style>
<div class="div1">设置透明度渐变效果的图片</div>
<div class="div2">正常图片</div>
</body>
</html>Rendering:
Description:
linear-gradient The () function is used to create an "image" of a linear gradient.
To create a linear gradient, you need to set a starting point and a direction (specified as an angle) of the gradient effect. You also need to define the end color. The stop color is the smooth transition you want Gecko to make, and you must specify at least two, although you can specify more colors to create more complex gradient effects.
css syntax:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
RGBA ()
RGBA means (Red-Green-Blue-Alpha) It is an extension of RGB to include an "alpha" channel, which allows you to set transparency on color values.
Recommended: "css video tutorial"
The above is the detailed content of How to set transparency gradient in css. For more information, please follow other related articles on the PHP Chinese website!