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

本文主要是介绍鼠标移动到图片显示遮罩效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

var backgroundImg = "";
$(".block").mouseover(function () {//背景加遮罩，避免在图片和文字之间移动遮罩重复，先截取原urlbackgroundImg = $(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);});

效果

这篇关于鼠标移动到图片显示遮罩效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---