CSS或JavaScript怎样实现图片透明度渐变

一共两张图片，背景设置一张图片，上层那张图片从不透明渐变到透明，设置到0.5的时候可以模糊的看到背景图

HTML

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkyq5M9l9X5QDHKbR1Pv78y0NTOydF-M9PWg&usqp=CAU" height="400px">
<img class='img' src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" height="400px">

CSS

img{
  position: fixed;
}

.img {
      -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,100)), to(rgba(0,0,0,0)));
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));

有用采纳

是要这种

css背景图片怎么设置透明度渐变-css教程-PHP中文网 css中，可以利用linear-gradient()和rgba()函数实现图片的透明度渐变，语法“background-image:linear-gradient(to top,rgba(..), rgba(..)),url(..)”。

https://www.php.cn/css-tutorial-474940.html

还是过度动画

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
@keyframes an{
      0% {opacity: 0;}
    100% {opacity: 1;}
}

.pic {
    width: 72px;
    height: 72px;
    background-image: url("1.png");
}
.pic img {
    animation: an 4s infinite alternate;
}
</style>
</head>
<body>
<div class="pic">
<img src="2.png" width="72" height="72" border="0" alt="">
</div>
</body>
</html>