功能要求:先上效果图
1.实现图片从清晰到模糊
代码:
HTML:
<div class="headerBG">
<img src="https://img13.360buyimg.com/cms/jfs/t1/24324/23/2775/179927/5c2188e0E37d57889/4a706d3298ca14e0.jpg" alt="">
</div>
CSS:
.headerBG{
position: fixed;
top: 0px;
left: 0px;
z-index: -5;
background-image: linear-gradient(bottom,rgba(255,255,255,1),rgba(255,255,255,0));
img{
mix-blend-mode: overlay;
width: 100%;
}
}