CSS: 如何用淡入淡出的方式切换两张背景图？

Question

我想在鼠标悬停时在背景图像属性之间切换，但默认过渡太快太锐利，我想为这两个属性加入淡入淡出的不透明度过渡。我希望它在我悬停时消失，也希望它在重置为原始背景图像时停止悬停。有什么想法吗？

#HeaderLogo {
        background: url('/logourl.png') no-repeat center;
        background-size: contain;   
        display: block;
        width: 800px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
    }
#HeaderLogo:hover {
        background: url('/hoverlogourl.png') no-repeat center;
    }

Answer 1

#HeaderLogo {
        background: url('/logourl.png') no-repeat center;
        background-size: contain;   
        display: block;
        width: 800px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        -webkit-transition: background-image 0.2s ease-in-out;
        transition: background-image 0.2s ease-in-out;
    }

Answer 2

您可以通过多种方式淡化 background-image，例如您可以使用：

#HeaderLogo {
        background: url('/logourl.png') no-repeat center;
        background-size: contain;   
        display: block;
        width: 800px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        transition: background 0.5s linear; 
    }
#HeaderLogo:hover {
        background: url('/hoverlogourl.png') no-repeat center;
    }

Answer 3

HeaderLogo可以使用过渡效果class

    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;

CSS: 如何用淡入淡出的方式切换两张背景图？

CSS: How to switch two background images with fading transition?

html

css

background-image

css-transitions