Question

我有一个带背景图像的div，但我想要的是当我悬停那个div时，背景会变成透明的白色滤镜（如50％透明度），所以我们可以看到背景和图像我在div里面。我不希望这个过滤器影响其中的图像，只影响背景。

HTML：

<div class="col-xs-3 col-md-3 back-div">
    <img src="imgs/logo.jpg">
</div>

CSS：

    .back-div{
    background-image: url("../imgs/imgbg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

是否有任何js框架可以用一些动画做到这一点？

由于

Answer 1

您可以使用一些jQuery来修改div。

 $(".back-div").css({ 'background': 'whatever'});

你可以在一个功能中输出它，你可以玩它。它将为您提供更加个性化的功能。

如果没有，请尝试使用它（在CSS中）：

opacity: 0.4;
    filter: alpha(opacity=40);

Answer 2

你必须用另一个内部div假装背景

<div class="your-cont">
    <div class="fake-bg"></div>
    <img src="imgs/logo.jpg">
</div>

CSS：

.your-cont {
     position:relative;
}
.your-cont:hover .fake-bg {
     opacity:0.5;
}
.fake-bg {
    position:absolute;
    z-index:-1;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

Answer 3

这可以通过一些简单的jQuery实现（允许您在类似结构的多个元素上重用它）。 *我给你jQuery，因为你问了表单动画以及悬停不透明效果，jQuery减轻了各种浏览器与css动画的不兼容性。

<强> jsFiddle

新JS：

$(function(){
    $('.back-div').hover(function(){
        $('.back-div img').animate({opacity: 0.5},1000);
    }, function(){
        $('.back-div img').animate({opacity: 1},1000);
    });
});

新CSS：

.back-div img {  
    opacity: 1;
}

悬停div更改背景属性

3 个答案: