Home > Article > Web Front-end > How to set image transparency in css to make the image gradually disappear
How to set image transparency in css to make the image gradually disappear
- WBOYOriginal
- 2021-11-26 18:45:293369browse
In css, you can use the "linear-gradient()" and "rgba()" functions to set the image transparency so that the image gradually disappears. The syntax is "linear-gradient(direction,rgba(255,255,255,1), rgba(255,255,255,0));”.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to set the transparency of the image in css to make the image gradually disappear
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
<style>
.div1 {
box-sizing: border-box;
width: 400px;
height: 320px;
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(1118.02.png)
}
</style>
<div class="div1">设置透明度渐变效果的图片</div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set image transparency in css to make the image gradually disappear. For more information, please follow other related articles on the PHP Chinese website!