叠加效果模糊

时间:2011-10-16 14:41:50

标签: javascript jquery html css

我可以使用CSS

对我的元素进行叠加效果
html:after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .6;
    background: #000;
    pointer-events: none;
    z-index: 1;
}

如何以与this类似的方式制作“模糊”叠加效果? (注意:我不想使用图像。我想模糊,例如,渲染的段落。)

1 个答案:

答案 0 :(得分:3)

您有两种方法可以执行此操作:

1。)对整个页面和所考虑的包装器div使用不同的背景。

2.。)使用jQuery .blurimage函数:

JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.blurimage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      $(".blurimg").blurimage();
});

</script>

HTML:

<img src="test.png" alt="test" class="blurimg">

希望这有帮助。

[链接到插件:http://plugins.jquery.com/project/blurimage]