CSS-毛玻璃效果

用到了 css 滤镜（filter）中的 blur 属性。

注意：

1.对元素直接使用模糊会将其内容全部模糊掉，为了保证文字不会模糊掉需要多一个层单独应用模糊效果。

2. 模糊效果并不会应用到其背后的元素上，所以需要使用 content 区域有和背景相同的背景图并进行模糊。

index.html：

<html>
<head>
    <meta http-equiv="pragma" content="no-cache"> 
    <meta http-equiv="Cache-Control " content="no-cache,must-revalidate"> 
    <meta name="description" content="">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <title>World of Warcraft</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="content">
            <h1>World of Warcraft</h1>    
            <p>The Titans, colossal, metallic-skinned gods from the far reaches of the cosmos, explored the newborn universe and set to work on the worlds they encountered. They shaped the worlds by raising mighty mountains and dredging out vast seas. They breathed skies and raging atmospheres into being. It was all part of their unfathomable, far-sighted plan to create order out of chaos. They even empowered primitive races to tend to their works and maintain the integrity of their respective worlds. </p>    
        </div>
    </div>
<!-- <script src="/static/bundle.js"></script> -->
</body>
</html>

style.css：

html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input {
    margin: 0;
    padding: 0;
}

html, body {
    font-size: 19px;
    font-family: 'Verdana','Arial';
    color: rgba(0,0,0,0.8);
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(bg1.jpg);
    background-position: center top;
    background-size: cover;
}

.content {
    background-position: center top;
    background-size: cover;
    overflow: hidden;
    width: 800px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -400px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    overflow: hidden;
    z-index: 2;
    padding: 50px;
    box-sizing: border-box;
}
.content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
    z-index: -3;
    margin: -30px;
    background-image: url(bg1.jpg);
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

.content::after {
    background-image: url(bg1.jpg);
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
}

.content h1 {
    text-align: center;
    margin-bottom: 20px;
}

.content p {
    text-indent: 2em;
    line-height: 1.7;
}

posted on 2016-07-17 21:25 爱生活的小蜜蜂阅读(329) 评论(0) 编辑收藏举报