css的图片逐渐出现 |css 颜色加深

/* 第一种方式：利用linear-gradient实现 */
.img-fadein {
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url("image.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}

这种方式利用渐变的方式，将一张透明的图片叠加在原图片上面。将透明度从0到1逐渐增加，从而使原图片逐渐出现。

/* 第二种方式：利用animation实现 */
.img-fadein {
background-image: url("image.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
animation: fadeIn 2s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

这种方式利用animation关键字，将透明度从0到1逐渐增加，从而使原图片逐渐出现。通过调整animation中的参数，可以实现不同的效果。

总之，通过使用CSS中的渐变和动画属性，大家可以轻松实现图片逐渐出现的效果，为网页设计增色不少。