您的位置：首页 > Web前端 > HTML

【html】【16】高级篇--毛玻璃效果[模糊]

2015-12-12 16:22 633 查看
参考:
http://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE%E7%89%87%E8%BD%AC%E6%8D%A2%E6%88%90%E6%A8%A1%E7%B3%8A%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/
下载:
http://download.csdn.net/detail/a393464140/7105685
效果:



css

.bg{
background-image: url("cat.jpg");    /* 背景图 */

background-position: center bottom;   /* 背景样式 */
background-attachment: fixed;
background-size: cover;
height: 100%;
font-size: 100%;
}
.glass{
position: relative;                    /* 玻璃样式 */
padding: 0;
border-bottom: 1px solid;
border-bottom-color: #ccc;
border-bottom-color: rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

margin-left:100px;                     /* 玻璃图层 偏移&大小 */
margin-top:50px;
height: 500px;
width: 800px;
}
.blur {
background-image: url("cat.jpg");    /* 背景图 */

height:500px;                         /* 模糊图层大小 */
width: 800px;

position: relative;                   /* 模糊图层样式 */
padding: 0;
background-position: center bottom;
background-attachment: fixed;
background-size: cover;
font-size: 100%;

/* 模糊滤镜 */
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}


html

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Glass Cat</title>
<link rel="stylesheet" type="text/css" href="glass-cat.css" >
</head>
<body class="bg">

<div id="glass" class="glass">
<div id="blur" class="blur"></div>
</div>
</body>
</html>


ok
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航