Home > Article > Web Front-end > 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:
<!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:
##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!