How to set transparency gradient for css background image

In css, you can use the linear-gradient() and rgba() functions to achieve the transparency gradient of the image. The syntax is "background-image:linear-gradient(to top,rgba(..), rgba(..) )),url(..)".

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

css background image setting transparency gradient

In css, you can use the linear-gradient() and rgba() functions to achieve the transparency gradient of the image

	
		
		
		
	


	
		
原图：
		

		
透明度渐变：
		

	

Rendering:

(Learning video sharing: css video tutorial)

Instructions:

The linear-gradient() 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, ...);

• direction Use the angle value to specify the direction (or angle) of the gradient.

• color-stop1, color-stop2,... Used to specify the starting and ending colors of the gradient.

#Use rgba in the linear-gradient() function to set the transparency gradient.

RGBA means (Red-Green-Blue-Alpha) It is an extension of RGB to include the "alpha" channel, which sets transparency to the color value.

Syntax:

rgba(red, green, blue, alpha)

• red Define the red value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.

• green Define the green value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.

• blue Define the blue value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.

• alpha - Transparency Define transparency 0 (completely transparent) ~ 1 (completely opaque)

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of How to set transparency gradient for css background image. For more information, please follow other related articles on the PHP Chinese website!