How to achieve opacity gradient in css

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:

      
正常图片

 
设置线性渐变不透明度效果的图片
 
设置径向渐变不透明度效果的图片
  

Rendering:

##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:

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:

(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!