zoukankan      html  css  js  c++  java
  • 背景模糊,内容清晰

     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>

  • 相关阅读:
    java第九次作业
    java第八次作业
    java第七次作业
    java第六次作业
    java第五次作业
    java第四次作业
    java第三次作业
    java第二次作业
    java第一次作业
    Javascript设计模式-----装饰者模式
  • 原文地址:https://www.cnblogs.com/jkr666666/p/6804418.html
Copyright © 2011-2022 走看看