[分享]css写背景图片淡入淡出

CSS写背景图片淡入淡出是一种常见的网页效果，下面我们来详细了解一下。

/*CSS代码*/
.fade-in-out {
    background-image: url('example.png');
    animation: fadeInOut 5s ease-in-out infinite;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
} 

上面的代码为演示用的例子，实际运用中需要根据实际情况进行修改。在这里我们使用animation属性实现淡入淡出效果，同时利用@keyframes定义动画中的关键帧。

其中animation属性有四个值，分别为：

animation-name: 动画名称；
animation-duration: 动画时长；
animation-timing-function: 动画速度曲线；
animation-iteration-count: 动画播放次数。 

在@keyframes中，我们定义了动画在0%、50%、100%时间点时的属性。这里的opacity属性用于控制元素的透明度，从而实现淡入淡出的效果。

最后，我们将需要实现淡入淡出效果的元素加上class属性，并设置对应的CSS样式即可。

<div class="fade-in-out"></div> 

以上就是CSS写背景图片淡入淡出的基本方法，大家可以通过修改上面的代码进行实际运用。