How to achieve opacity gradient in css-CSS Tutorial-php.cn

How to achieve opacity gradient in css

青灯夜游

Release： 2023-01-07 11:45:00

Original

3514 people have browsed it

In css, you can use the linear-gradient() or radial-gradient() gradient function together with rgba() to set the opacity gradient. linear-gradient() and radial-gradient() can set gradients, and rgba() can control opacity.

How to achieve opacity gradient in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the linear-gradient() or radial-gradient() gradient function with rgba() to set the opacity gradient.

The linear-gradient() and radial-gradient() functions can set the gradient effect:

linear-gradient(): Create a linear gradient
radial-gradient(): Create a radial gradient

rgba() function uses red (R), green (G), blue (B) , transparency (A) overlay to generate a variety of colors.

Code example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片透明度渐变实例演示</title>
		<style>
			div{
				box-sizing: border-box;
				width: 400px;
				height: 320px;
				font-size: 22px;
				padding-top: 100px;
				overflow: hidden;
				background: no-repeat center top / 100% 100%;
			}
			.div1 { 
				background-image: url(img/1.jpg)
			}
			.div2 {
				background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/1.jpg)
			}
			.div3 {
				background-image: radial-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 1)), url(img/1.jpg)
			}
			
		</style>
		<div class="div1">正常图片</div><br>
		<div class="div2">设置线性渐变不透明度效果的图片</div>
		<div class="div3">设置径向渐变不透明度效果的图片</div>
		</body>

</html>

Copy after login

Rendering:

How to achieve opacity gradient in css

##Description:

In order to create a linear gradient, you must define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can also set a starting point and a direction (or an angle). The syntax is as follows:

 background-image:linear-gradient(direction, color-stop1, color-stop2, ...);

Copy after login

Example:

How to achieve opacity gradient in css

A radial gradient is defined by its center.

In order to create a radial gradient, you must also define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can also specify the center, shape (circle or oval), and size of the gradient. By default, the center of the gradient is center (meaning at the center point), the shape of the gradient is ellipse (meaning an ellipse), and the size of the gradient is farthest-corner (meaning to the farthest corner).

Grammar:

 background-image:radial-gradient(shape size at position, start-color, ..., last-color);

Copy after login

Example:

How to achieve opacity gradient in css

(Learning video sharing:

css video tutorial)

The above is the detailed content of How to achieve opacity gradient in css. For more information, please follow other related articles on the PHP Chinese website!