CSS 揭秘(4)--毛玻璃效果

Posted by liveipool on February 8, 2017

毛玻璃效果

半透明颜色最初的使用场景之一就是作为背景,将其叠放在照片类或其他花哨的背层(表示页面被某个上层元素遮住的部分)之上,可以减少对比度,确保文本的可读性。这种效果确实很有视觉冲击力,但仍然可能导致文字很难阅读,特别是当不透明度较低或背层图案太过花哨时。
比如下面这种情况:

// jade
main.w-566.h-260.m-40
	blockquote The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.
		footer - 
			cite Liveipool

// css
body {
	background: url("/static/pictures/08685344-11d9-426d-a204-ccabbf7049ba-2060x1236.jpeg");
	background-repeat: no-repeat;
}
main {
	background: hsla(0, 0%, 100%, .2);
}

18.1.png

虽然可以增加背景色的alpha值(不透明度)来改善文本可读性的问题,但这样的设计也毫无乐趣可言了。

想要解决这个问题,通常的解决方案是把文本层所覆盖的那部分图片区域做模糊处理。我们可能提到模糊处理就会想到blur()滤镜,但实际上,如果直接使用blur()滤镜,整个元素都会被模糊,所有东西都没办法看了。
我们想要找的是一种可以只对元素的背层(即该元素被半透明区域遮住的部分)应用滤镜的方法。

我们依然是通过用伪元素来处理的方法,将伪元素处理好后定位到元素的下层,再将它的背景无缝匹配< body >的背景。

// jade
main.w-566.h-260.m-28
	blockquote The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.
		footer - 
			cite Liveipool

// css
body, main::before {
	background: url("/static/pictures/08685344-11d9-426d-a204-ccabbf7049ba-2060x1236.jpeg") no-repeat;
}

main {
	position: relative;
	background: hsla(0, 0%, 100%, .2);
	overflow: hidden;
}

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

最后得到的效果为:
18.2.png
现在页面文本的可读性好多了,整个设计也更优雅了。只是别忘了要设置回退机制。