<body> <div class="wrapper"> <div class="pic"> 毛玻璃效果,毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果 </div> </div> </body>
.wrapper,.pic:before{ background: url("http://www.officedoyen.com/uploads/allimg/150303/1-150303194244Q5.jpg") 0 / cover fixed; } .wrapper{ text-align: center; padding: 100px; margin: 20px; } .pic{ height: 550px; width: 550px; color: #fff; font-size: 20px; padding-top: 20px; background-color: rgba(255,255,255,0.5); margin: auto; position: relative; overflow: hidden; border-radius: 0.3em; z-index: 1; } .pic:before{ content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; margin: -30px; -webkit-filter: blur(10px); filter: blur(10px); }
毛玻璃效果,毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果