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

原创 2017年01月03日 14:25:53

使用玻璃效果比普通效果中的文字更易阅读,而且整体美观。在过去,我们通常把文本框区域的背景做模糊处理,随后使用一整张背景。不仅消耗性能,而且在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、首先是StackBlur模糊算法; 把大神的java类照搬过来:package com.example.aero...

(4.2.24)一种快速毛玻璃虚化效果实现

编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! 原...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

UIBlurEffect 毛玻璃特效实现

UIBlurEffect 类和 UIVisualEffectView 类添加毛玻璃特效

CSS技巧收集——毛玻璃效果(深入理解滤镜filter)

原文链接:http://www.cnblogs.com/ghost-xyx/p/5677168.html先上 demo 和 源码其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filte...
  • cometwo
  • cometwo
  • 2016年07月16日 23:55
  • 13758

快速毛玻璃虚化效果实现

快速毛玻璃虚化效果实现--Android 在iOS设备上我们随处可见毛玻璃效果,而且最近越来越多的场合应用到了这种美观的虚化效果,包括本人的一个开源项目BlureIm...
  • Bue_Sky
  • Bue_Sky
  • 2016年09月18日 15:53
  • 710

CSS3 设置模糊背景图片

使用方法: -webkit-filter: blur(5px); /* Chrome, Safari, Opera */     filter: blur(5px); blur(px) 给...

JAVA毛玻璃效果

查找好多资料都查不到毛玻璃效果怎么做最后想起之前查阅无边框的时候找到过的一个方法“截图模糊法”本代码转自:夜听风雨的博客package javaapplication1;import java.awt...
  • bbcckkl
  • bbcckkl
  • 2017年02月28日 21:38
  • 117

css filter详解

filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值...

Python图像处理库PIL的ImageFilter模块介绍

Python图像处理库PIL的ImageFilter模块介绍 ImageFilter模块提供了滤波器相关定义;这些滤波器主要用于Image类的filter()方法。 一、ImageFilter模块所支...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:filter:blur() 实现毛玻璃效果
举报原因:
原因补充:

(最多只允许输入30个字)