Home > Article > Web Front-end > How to set transparency gradient for css background image

How to set transparency gradient for css background image

青灯夜游Original: 2021-04-26 18:27:4616412browse

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>图片透明度渐变实例演示</title>
		<style>
			.div1 {
				box-sizing: border-box;
				width: 400px;
				height: 240px;
				font-size: 22px;
				padding-top: 100px;
				overflow: hidden;
				background: no-repeat center top / 100% 100%;
				background-image: url(img/3.jpg)
			}
			.div2 {
				box-sizing: border-box;
				width: 400px;
				height: 240px;
				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(img/3.jpg)
			}
			
			
		</style>
	</head>

	<body>
		<p>原图：</p>
		<div class="div1"></div>
		<p>透明度渐变：</p>
		<div class="div2"></div>
	</body>

</html>

Rendering:

How to set transparency gradient for css background image

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

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 set the color of a tag in cssNext article：How to set the color of a tag in css

See more

How to set transparency gradient for css background image

Related articles