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 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 2

您可以在HeaderLogo类中使用过渡效果

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

CSS：如何使用渐变过渡切换两个背景图像？

3 个答案: