CSS 毛玻璃效果
2024-10-03 02:41:14
效果图:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
html,body {
height: 100%;
margin: 0px;
}
body {
background-image: url(http://b-ssl.duitang.com/uploads/blog/201406/28/20140628160330_r2RsB.jpeg);
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
// 核心css -- 依据父级容器的背景效果实现毛玻璃
.wrap {
width: 100%;
height: 200px;
position: relative;
background: inherit;
box-shadow: 0px 0px 8px #333;
border-radius: 5px;
z-index: 0;
}
// 模糊效果
.wrap::before {
content: '';
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
background-attachment: fixed;
filter: blur(5px);
z-index: -1;
}
// 增加透明度的白底 -- 非必要
.wrap::after {
content: '';
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,.35);
z-index: -1;
}
</style>
</head>
<body>
<div class="wrap">
<span style="padding: 60px;display: inline-block;">玻璃模糊效果... ...</span>
</div>
</body>
</html>
最新文章
- POJ 3233Matrix Power Series
- Windows Server 2008 R2 添加且制成“NFS服务器”角色后与Unix客户端匿名访问常见问题
- Spring加载xsd引起的问题小记
- 前后台json数据绑定——way.JS
- GP 环境参数名称列表
- struts请求源码的跟踪
- Altium Designer 15 --- Nets Update
- VS2015新建asp.net core站点
- php匿名函数小示例
- Android 如何设置默认语言
- How to upgrade boost libary using apt-get ?
- 第二篇:python高级之装饰器
- FMDB警告Warning: there is at least one open result set around after performing的问题
- Light OJ 1314 Names for Babies
- Android Intent的几种用法总结【转】
- java(12)字符串
- silverlight 基本信息学习随笔
- 【python】ftp连接,主被动,调试等级
- 10.21CRM项目(01)
- hbase 的一些坑