css制作磨砂效果图片 |css鼠标滚动图片缩放

磨砂效果可以让图片变得更有视觉层次和立体感，是许多设计师钟爱的一种效果。下面就让大家来学习如何使用CSS来制作磨砂效果图片吧。

.container {
position: relative;
display: inline-block;
}
.container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
z-index: 1;
}
img {
position: relative;
z-index: 2;
}

在上述代码中，大家使用了一个div容器来包含要添加磨砂效果的图片。然后，在容器的伪元素after中，大家使用了一个渐变函数来指定磨砂效果的颜色和透明度。

最后，大家把要添加磨砂效果的图片设置为相对定位，并放在容器的z轴上方，即可完成一个磨砂效果图片的制作。

通过上述简单的代码，大家就可以轻松实现一个漂亮的磨砂效果图片了。相信在今后的网页设计中，这种效果还会经常被使用到。