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

最新推荐文章于 2024-06-29 16:08:06 发布

longshelan_113

最新推荐文章于 2024-06-29 16:08:06 发布

阅读量1.3w

点赞数 5

分类专栏： CSS

本文链接：https://blog.csdn.net/longshelan_113/article/details/53994115

版权

CSS 专栏收录该内容

1 篇文章 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);
}