手把手教你CSS怎样实现毛玻璃结果

今天在做一个登录界面的时候，因为视觉给的页面配景图片太艳丽亮眼，致使页面中间的登录表单框很不显眼，结果很差。就想到了做成毛玻璃的结果，此刻分享出来，大家一起看看吧。

因为以前用过CSS filter属性，在属性值中运用blur()函数可以起到毛玻璃结果，所以我有2个思绪来实现突出登录表单框的结果：

• 对wrap-box运用filter:blur();，然后将login-box的z-index设定为比父元素大使之浮在上层，使页面中除了登录表单框局部都是依稀的。

Exciting!这种办法似乎可行，但是结果却不是所奢望的，login-box也被依稀了！缘由如下：

利用了filter:blur();的元素的所有子孙元素都会被依稀处置（不是由于继承），即便子孙元素离开了该元素的文档流也不克不及以免。

• 只对login-box背后局部依稀处置。解决方案是在login-box基层加一个与之重叠的元素，对此元素利用filter:blur();，可以选中用伪元素：

.login-box::before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	filter:blur(10px) contrast(.8);
	z-index:-1;
}

并设定如下配景样式：

.wrap-box ,.login-box::before{
	background:url('/assets/login_bg.jpg') 0 / cover fixed;
}

结果达成如下：

谢谢大家的浏览，但愿大家收益多多。

本文转自： https://blog.csdn.net/buttonChan/article/details/79889372

举荐教程：《CSS教程》

以上就是手把手教你CSS怎样实现毛玻璃结果的细致内容，更多请关注 百分百源码网 其它相干文章！