Home > Article > Web Front-end > How to achieve opacity gradient in css

How to achieve opacity gradient in css

青灯夜游Original: 2021-07-22 11:59:513438browse

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.

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>

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

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

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!

html5 css css3

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to optimize css writingNext article：How to optimize css writing

See more

How to achieve opacity gradient in css

Related articles