背景模糊，内容清晰 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             *{margin: 0;padding:0}
 8             body,html{
 9                 width: 100%;
10                 height: 100%;
11                 background: url('cat-019.jpg');
12                 background-position: center;
13                 background-size: 100% 100%;
14             }
15             .box-wrap {
16                 position: relative;
17                 width: 900px;
18                 height: 500px;
19                 margin: 0 auto;
20             }
21             .box {
22                 height: 100%;
23                 background: url('cat-019.jpg');
24                 background-position: center;
25                 background-size: 100% 100%;
26                 -webkit-filter: blur(3px);
27                 -moz-filter: blur(3px);
28                 -o-filter: blur(3px);
29                 -ms-filter: blur(3px);
30                 filter:blur(3px);
31             }
32             .box1{
33                 position: absolute;
34                 top: 50%;
35                 left: 50%;
36                 margin-top: -100px;
37                 margin-left: -200px;
38                 width:400px;
39                 height:200px;
40                 border-radius: 5px;
41                 background: rgba(255, 255, 255, 0.5);
42 
43                 text-align: center;
44                 line-height: 200px;
45             }
46         </style>
47     </head>
48     <body>
49         <div class="box-wrap">
50             <div class="box"></div>
51             <div class="box1">
52                 <h1>Hello,world</h1>
53             </div>
54         </div>
55     </body>
56 </html>

 

posted @ 2017-05-03 22:44  年少的你如此美丽  阅读(207)  评论(0)    收藏  举报