首页 > 代码库 > 背景模糊,内容清晰
背景模糊,内容清晰
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>
背景模糊,内容清晰
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。