css3怎么实现模糊遮挡的效果
不是div或者图片滤镜那么简单要的是前面一个div透明但是被前面div遮挡部分的后面的一切模糊化就像win10开始菜单的效果...
不是div 或者图片滤镜那么简单 要的是前面一个div透明 但是被前面div遮挡部分的后面的一切模糊化 就像win10开始菜单的效果
展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{display: block;width: 200px;height: 200px;position: relative;}
img{width: 200px;height: 200px;}
div{background: #111111;z-index: 999;width: 200px;height: 200px;position: absolute;top: 8px;opacity: 0;}
</style>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("div").hover(function(){
$("div").css("opacity","0.2");
$("img").css("opacity","0.65");
},function(){
$("div").css("opacity","0");
$("img").css("opacity","1");
});
});
</script>
</head>
<body>
<a href=""><img src="../img/1.jpg"/></a><div></div>
自己换一张图片，导入jQuery.min的开发库
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{display: block;width: 200px;height: 200px;position: relative;}
img{width: 200px;height: 200px;}
div{background: #111111;z-index: 999;width: 200px;height: 200px;position: absolute;top: 8px;opacity: 0;}
</style>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("div").hover(function(){
$("div").css("opacity","0.2");
$("img").css("opacity","0.65");
},function(){
$("div").css("opacity","0");
$("img").css("opacity","1");
});
});
</script>
</head>
<body>
<a href=""><img src="../img/1.jpg"/></a><div></div>
自己换一张图片，导入jQuery.min的开发库
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
