jquery - 使用 jquery 定位 CSS 内联背景

Question

所以我试图通过在 mouseleave 上淡出来操纵我的背景。

但我不能用 jquery 定位它。

jQuery:

$("html").mouseleave(function(){
    $('#intro').fadeTo('slow',0.67,function(){
            $("#intro").css("background"); //attempting to target bg

    });
});

CSS:

#intro{
   background: url("images/overlay.png"), url("../../images/intro.jpg");
}

我如何定位这个背景？

Answer 1

当您调用 $('#intro').fadeTo 时，您是在说您想要为 intro 的不透明度设置动画。 fadeTo 的第三个参数是动画完成后调用的函数，你不能用它改变 fadeTo 的目标。元素的不透明度总是影响它的后代。你不能使用 fadeTo 来实现你想要的。

作为解决方法，使用::after 伪元素设置intro 的背景图像。将其不透明度初始化为 0.67，并在悬停时将其更改为 1.0。查看此代码段中的详细信息:

body{
    background: #000;
}
#intro{
    position: relative;
    width: 300px ;
    height: 300px ;
}
#intro::after{
    content: "";
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg);
    opacity: 0.67;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    transition: opacity 600ms;
}
#intro:hover::after{
    opacity: 1;
}
#intro p{
    color: #fff;
}
#intro img{
    width: 100px ;
    height: auto ;
}

<div id="intro">
    <p>La Gioconda</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg"/>
</div>