鼠标移动到图片显示遮罩效果
<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);
});
效果