CSS3实现毛玻璃效果

个人博客

CSS3实现毛玻璃效果

 tangzihan  2020-04-24 16:57:09 71人已围观【css】

最近在开发个人博客的时候，在网上学到了一种CSS特效---毛玻璃 感觉还是比较实用下面将这种特效分享给大家。
如下图，我的后台登录界面表单部分就是毛玻璃效果
有时候这种特效很有用，可以达到一种朦胧的效果，接下来我们来看看如何实现它

![](http://www.zihanzy.com/uploads/images/article_con/202004/24/article_con_1587715920_jC3ZZ39mJZ.png)

首先定义布局

```php
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class='box'>
	<form>
		<h1>博客后台管理系统</h1>
		<input type="text" placeholder="*****" name="name">
		<input type="password" placeholder="***" name="password">
    </form>
</div>
</body>
</html>
```

给整个`body`添加背景图片
```
body{
	background-image:url(/admin/img/admin.jpg);
	background-size:cover;
	background-position:left left;
	background-repeat:no-repeat;
	background-attachment:fixed;
}
```
`background-attachment:fixed`用于固定背景图像

接下来我们初始`box`盒子高宽并使`box`盒子垂直居中
```
.box{
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		margin:auto;//从这里到上面都是垂直居中代码
		width:600px;
		height:400px;
		text-align:center;
		overflow:hidden;
		border-radius:6px;
		background:inherit
		border:1px solid red;
	}
其中`background:inherit`是核心，他使子元素继承了父元素的背景，想实现毛玻璃效果必须添加这个属性
```
效果如下：

![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202004/24/article_con_1587716802_G9RX2BtACo.png)

接下来添加毛玻璃特效
通过伪类元素实现
```
.box::before{
	content:'';
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:inherit;
	background-attachment:fixed;//固定背景
	-webkit-filter: blur(4px); 
  -moz-filter: blur(4px);
  -ms-filter: blur(4px);   //浏览器兼容 
  filter: blur(4px); 
}
```
相当于在`box`盒子添加了一层元素，并且继承`box`背景，这里`filter:bulr()`是关键它是css的滤镜属性，我们可以给他设置合适的值，达到我们想要的效果`filter:bulr()`的应用还有很多大家自行度娘。

到这里毛玻璃效果已经完成
![](http://)
![](http://www.zihanzy.com/uploads/images/article_con/202004/24/article_con_1587718093_ILeQyCpGL1.png)

我们还可以给他加一层滤镜颜色，使其黯淡下来
```
.box::after{
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(0,0,0,0.2);
}
```
效果如下
![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202004/24/article_con_1587718253_gPQk3xSktM.png)

此时发生我们之前的文字不见了，设置因为毛玻璃效果覆盖了`box`的其他元素，我们改变下z-index属性即可

优化一下
```
input,
button{
	z-index:1;
	color:white;
	position:relative;
	width:400px;
	height:60px;
	background:transparent;
	border:1px solid #ccc;
	border-radius:4px;
	outline:none;
	color:white;
	font-size:30px;
}

h1{
	z-index:1;
	font-weight:300;
	letter-spacing:4px;
	color:#eee;
	margin-bottom:30px;
	margin-left:50px;
	position:relative;
}
```
至此毛玻璃效果完成

![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202004/24/article_con_1587718594_i1wl1GqeCa.png)

文章评论

#@热心网友 2022-06-30 10:32:55

真棒，这个还会，长见识了。