CSS3设置背景毛玻璃效果

先抛出需求：
有一张全局大图，中间有一层文字，文字的背景使用毛玻璃模糊。类似效果如下：

<!--html-->
<div id="w"><article><p>123123123123</p><p>123123123123</p><p>123123123123</p><div id="a">  </div></article>
</div>

/*css*/
#w{background:url(bg_01.jpg) no-repeat center center fixed  ;width:100%;height:100%;
}
article{width:40%;height:1200px;margin:0 auto;text-align: center;z-index: 1;position: relative;
}
#a{position: absolute;width:500%;height:100%;margin-left:-150%;top:-10px;background:url(bg_01.jpg) no-repeat center center fixed  ;-webkit-filter: blur(0px);z-index: -1;
}

思路如下：
1）首先不能直接在背景层的元素中使用filter，因为这样会把文字也模糊掉。

2）因此，解决的办法就是另外增加一个层，用以放置模糊效果。然后使用绝对定位，让它固定在想要有毛玻璃效果的局部上，并设置z-index值小于父元素，让它不要挡住上面那层文字。

3）在放置模糊效果的层上用与父元素一样的背景，并用fixed值将其固定，形成背景重叠。（关键，必须要让两张背景图重叠起来）若有超出部分可以用overfloat:hidden，进行隐藏。

使用JS控制scroll来改变filter的值可以让画面变的很炫酷。

/*js*/
$(function(){var a=0;var c = 1;$(window).scroll(function(){var b = $(this).scrollTop();// alert(b);if(b>98 && b<160){$("#a").css("-webkit-filter","blur("+c+"px)");}else if(b>160){$("#a").css("-webkit-filter","blur(2px)");} else if(b<100){$("#a").css("-webkit-filter","blur("+a+"px)");}})
});

CSS3设置背景毛玻璃效果相关推荐

Css3实现背景毛玻璃效果
毛玻璃效果 ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法 css3 Filter css3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项: 1.gr ...
CSS设置背景透明效果
CSS设置背景透明效果设置背景透明效果有两种方法: 使用opacity属性定义透明度,范围0-1,0表示完全透明,1表示不透明,优点:可以在背景图片以及背景颜色上使用.缺点:会把设置div及其子元素 ...
Android 抽屉菜单滑动时模糊背景 | 毛玻璃效果
先来看看要实现的效果图录制的有点模糊在补一张静态图简单的分析一下: 1⃣️一开始我一直以为抽屉菜单的背景是一张半透明的高斯模糊图片,一直尝试着用ps做一张然后发现并没有什么卵用(纯色背景或者图片是 ...
前端开发问题——css设置背景样式效果无法显现
思考维度 1.css样式是否配置有误,如:检查背景url是否写错,css样式是否被调用,是否出现同名css导致样式被覆盖 2.背景无法撑开元素的宽高,在为元素设置背景时一定要先设置宽度 3.设置背景的 ...
html中背景条纹效果,css3 条纹背景滚动效果
今天在一个网站上看到这样一个效果,我一开始以为一个背景gif图片,为了验证我的想法,我打开firebug 一查看,原来不是gif.是用css3完成的.于是我就在查看css3的api帮助下尝试着写一写 ...
css设置背景图片缩小,css3 设置背景图片大小（缩略图形式缩小）
[译]libev和libevent的设计差异本文译自what's the difference between libev and libevent? 作者是libev作者 [问]两个库都是为异步i ...
css背景图毛玻璃,css实现背景图片的毛玻璃效果
问题一css 一.简述问题html 最近在作登陆页面的时候,遇到了一个问题:将登陆页面的背景图片,设置为毛玻璃效果.在网上找到了关于这方面的资料.web 二.问题解决svg .blur { filte ...
css实现背景图片的毛玻璃效果
问题一 1.简述问题最近在做登录页面的时候,遇到了一个问题:将登录页面的背景图片,设置为毛玻璃效果.在网上找到了关于这方面的资料. 2.问题解决 <!DOCTYPE html> < ...
css毛玻璃效果—附：子盒子背景跟随父盒子背景
今天写了一个毛玻璃效果的网页,再次进行总结: HTML: <div class="whole"><div class="login">& ...

CSS3设置背景毛玻璃效果

CSS3设置背景毛玻璃效果相关推荐

最新文章

热门文章