鼠标移动到图片显示遮罩效果

鼠标移动到图片显示遮罩效果

<div class="block block_2_1" style="background-image:url(/Img/artwork/ArtWorkHome/ysphh_3.jpg);display:block;">
</div>

var backgroundImg = "";
$(".block").mouseover(function () {
        //背景加遮罩，避免在图片和文字之间移动遮罩重复，先截取原url
        backgroundImg = $(this).css("background-image");
        backgroundImg = backgroundImg.match(/url(\S*)/)[1];
        backgroundImg = "url" + backgroundImg;
        $(this).css("background-image", "linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7))," + backgroundImg);
    });
    $(".block").mouseleave(function () {
        backgroundImg = $(this).css("background-image");
        backgroundImg = backgroundImg.match(/url(\S*)/)[1];
        backgroundImg = "url" + backgroundImg;
        $(this).css("background-image", backgroundImg);
    });

效果