How to set transparency gradient in css-CSS Tutorial-php.cn

How to set transparency gradient in css

藏色散人

Release： 2022-12-30 11:13:33

Original

17708 people have browsed it

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.

How to set transparency gradient in css

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>

Copy after login

Rendering:

How to set transparency gradient in css

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, ...);

Copy after login

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!