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);
}



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

Python图像处理库PIL的ImageFilter模块介绍 ImageFilter模块提供了滤波器相关定义;这些滤波器主要用于Image类的filter()方法。 一、ImageFilter模块所支...
  • icamera0
  • icamera0
  • 2016年02月21日 18:06
  • 9745

【python图像处理】图像的滤波(ImageFilter类详解)

在图像处理中,经常需要对图像进行平滑、锐化、边界增强等滤波处理。在使用PIL图像处理库时,我们通过Image类中的成员函数filter()来调用滤波函数对图像进行滤波,而滤波函数则通过ImageFil...
  • guduruyu
  • guduruyu
  • 2017年05月08日 11:50
  • 2161

使用Glide快速实现毛玻璃效果

Glide下载图片想必大家都知道了,今天我和大家分享一个使用Glide下载完成后自动毛玻璃的实践。 1.引用Gradle:        compile 'jp.wasabeef:glide-...
  • u013718120
  • u013718120
  • 2016年10月14日 17:46
  • 2114

Qt实现areo毛玻璃效果的类,以及使用方法:

  以下是实现areo效果的类,以及使用方法:   ************************main.cpp****************************** #include #i...
  • hufeng825
  • hufeng825
  • 2010年07月20日 09:51
  • 3006

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

一种快速毛玻璃虚化效果实现  开发进阶  AndroidChina  1个月前 (05-02)  763浏览  0评论 在iOS设备上我们随处可见毛玻璃效果,而且最近越来越多的场合应用到了这...
  • sno_guo
  • sno_guo
  • 2016年06月05日 13:00
  • 625

wpf 实现实时毛玻璃(live blur)效果

IOS7发布后,就被它的时实模糊吸引了,就想着能不能将这个效果引入到我们的产品上。拿来当mask肯定会很爽,其实在之前也做过类似的,但是不是实时效果,是死的,只是截图然后模糊,当背景,效果可想而知。 ...
  • fengchun_doff
  • fengchun_doff
  • 2014年10月06日 13:43
  • 5088

wpf 实时毛玻璃 live blur 效果

  • 2014年10月06日 13:43
  • 1.05MB
  • 下载

WPF 几行代码实现窗体毛玻璃效果(Aero Glass)

创建一个叫AeroGlass.cs 的类,代码如下: using System; using System.Runtime.InteropServices; using System.Windows...
  • soft2buy
  • soft2buy
  • 2011年11月07日 12:56
  • 7194

WPF自定义毛玻璃窗口(自适应系统)

  • 2016年06月11日 11:14
  • 495KB
  • 下载

Wpf 毛玻璃效果

  • 2017年09月05日 18:21
  • 2.1MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:filter:blur() 实现毛玻璃效果
举报原因:
原因补充:

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