加入收藏 | 设为首页 | 会员中心 | 我要投稿 温州站长网 (https://www.52wenzhou.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

用css如何做背景虚化的效果?方法是什么?

发布时间:2022-01-11 14:21:42 所属栏目:语言 来源:互联网
导读:本文给大家分享用css做背景虚化的效果的内容,实现效果如下,小编觉得比较实用,大家在做网页设计背景的时候可以参考使用,下面我们就来看看具体的实现背景虚化方法是什么吧。 代码演示(以上图效果为例) 把主要模块写出来,其他详细内容的代码就省略啦 HTM
  本文给大家分享用css做背景虚化的效果的内容,实现效果如下,小编觉得比较实用,大家在做网页设计背景的时候可以参考使用,下面我们就来看看具体的实现背景虚化方法是什么吧。
 
 
 
  代码演示(以上图效果为例)
 
  把主要模块写出来,其他详细内容的代码就省略啦
 
  HTML代码:
 
   <div class="login-container">
       //这个div就是背景图
       <div class="beijing"></div>
       //这个div就是显示的内容块,也就是我的logo和登录框
       <div class="content"></div>
    </div>
  CSS代码:
 
   .login-container{
      position: relative;
      width: 100%;
      height:100%;
      position: relative;
      //利用flex布局让内容content模块垂直居中
      display: flex;
      flex-direction: column;
      position: relative;
    }
   .beijing{  //背景图样式
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0px;
      top:0px;
      background: url('../../../static/img/timg (1).jpg');
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-filter: blur(10px);
      -moz-filter: blur(10px);
      -o-filter: blur(10px);
      -ms-filter: blur(10px);
      filter: blur(10px);
    }
  .content{  //内容图样式
   width: 80%;
   height: 70%;
   position: absolute;
   z-index: 5;
  }
  按照上面的html和css编写就可以实现你想要的背景图虚化效果喽!

(编辑:温州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读