CSS3实现毛玻璃效果
最近在开发个人博客的时候，在网上学到了一种CSS特效---毛玻璃 感觉还是比较实用下面将这种特效分享给大家。 如下图，我的后台登录界面表单部分就是毛玻璃效果 有时候这种特效很有用，可以达到一种朦胧的效果，接下来我们来看看如何实现它
首先定义布局
<!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`是核心，他使子元素继承了父元素的背景，想实现毛玻璃效果必须添加这个属性效果如下：
接下来添加毛玻璃特效
通过伪类元素实现
.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()的应用还有很多大家自行度娘。
到这里毛玻璃效果已经完成
我们还可以给他加一层滤镜颜色，使其黯淡下来
.box::after{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(0,0,0,0.2);
}效果如下
此时发生我们之前的文字不见了，设置因为毛玻璃效果覆盖了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;
}至此毛玻璃效果完成
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-04-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
