css如何实现动态模糊遮罩效果

html-css025

css如何实现动态模糊遮罩效果,第1张

不是很明白你要的是什么效果，既然是导航，本来z-index就会高于内容，不会影响误操作到内容，没必要做遮罩层。鼠标放到哪，哪模糊，用a:hover实现就行了，你如果要遮罩整个界面而不只是导航下面那部分，那做一个遮罩层就行了，做成半透明，控制他的display在none和block之间变换，绑定移入移出事件给导航的各个元素。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

a{display: blockwidth: 200pxheight: 200pxposition: relative}

img{width: 200pxheight: 200px}

div{background: #111111z-index: 999width: 200pxheight: 200pxposition: absolutetop: 8pxopacity: 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>

1．首先，看一下HTML，一个img图像控件和一个带有样式的div，其中包含文本。这个就是蒙版遮罩层。

2．然后，查看样式定义。先检查图像容器和图像样式，如图所示。其中要注意的是img_container样式里定义了position:relative，这个主要是为了遮罩层做绝对定位做准备的。

3．接着，查看遮罩层的样式定义。该代码如图所示。

背景：rgba（0，0，0，0．7）；

可以通过修改以下数字0．7来更改透明度。 1是完全不透明的，0是完全透明的。

4．随后，添加用于鼠标移动的脚本代码以显示遮罩层。该js代码是用jquery编写的，既方便又简单，因此首先介绍jquery脚本库。

5．然后，添加mouseover和mouseout事件，主要是当鼠标移到图像容器时显示遮罩层，并在鼠标移出时隐藏遮罩层。

6．刷新页面，可以看到页面上显示的普通图片。

7．最后，可以看到当鼠标放在图片上时，将显示遮罩层。