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>
