关闭

filter:blur() 实现毛玻璃效果

703人阅读 评论(0) 收藏 举报
分类:

使用玻璃效果比普通效果中的文字更易阅读,而且整体美观。在过去,我们通常把文本框区域的背景做模糊处理,随后使用一整张背景。不仅消耗性能,而且在HTML方面难以修改维护。


我们用filter:blur()这个css滤镜来实现。目前所以的浏览器,除了IE,其他浏览器上均能实现。

1. 以下是HTML片段


<body>
      <main>
            <blockquote>
                    "The only way to get rid of a temptation is to yield to it. 
		     Resist it, and your soul grows sick with longing for the things 
		     it has forbidden to itself, with desire for what its monstrous 
 		     laws have made monstrous and unlawful."
             </blockquote>
      </main>
</body>



2. 给body与main伪元素设置背景,background-attachment的值设置为fixed。这个很重要。不管元素父级是谁,一旦设置为fixed,其背景是相对于整个窗口的视角来定位,与绝对定位的fixed相同。这样方便模糊后的图片与原图完美匹配。

body,main::before{
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment:fixed;
}


3.接下来给main的伪元素设置模糊值。虽然现代浏览器能够支持,比如Firefox,Chrome等,但如果想要在IE浏览器上实现,这个时候我们不得不专门为它想个解决办法,最方便的就是直接给它增加背景色,而不是模糊化。

main::before{
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: -30px;
	z-index: -1;
	-webkit-filter: blur(20px);
	filter: blur(20px);
}


4. 最后稍微优化一下代码,整理布局,一个毛玻璃效果就实现了,很简单。

body {
	min-height: 100vh;
	box-sizing: border-box;
	margin: 0;
	padding-top: calc(50vh - 6em);
	font: 150%/1.6 Baskerville, Palatina,serif;
}

body,main::before {
	background: url("images/background.jpg") 0 / cover fixed;
}

main {
	position: relative;
	margin: 0 auto;
	padding: 1em;
	max-width: 23em;
	background: hsla(0,0%,100%,.25) border-box;
	overflow: hidden;
	border-radius: .3em;
	box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
		    0 .5em 1em rgba(0,0,0,0.6);
	text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
}

main::before{
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: -30px;
	z-index: -1;
	-webkit-filter: blur(20px);
	filter: blur(20px);
}



1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3608次
    • 积分:84
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类