加入收藏 | 设为首页 | 会员中心 | 我要投稿 航空爱好网 (https://www.dakongjun.com/)- 事件网格、云防火墙、容器安全、数据加密、云数据迁移!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

实现背景虚化效果:CSS的魔法技术

发布时间:2024-07-05 16:03:17 所属栏目:语言 来源:DaWei
导读: 本文给大家分享用css做背景虚化的效果的内容,实现效果如下,小编觉得比较实用,大家在做网页设计背景的时候可以参考使用,下面我们就来看看具体的实现背景虚化方法是什么吧。

把主要模块
本文给大家分享用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编写就可以实现你想要的背景图虚化效果喽!

以上就是CSS实现背景虚化效果的代码啦,需要的朋友可以参考学习,希望对大家学习CSS有帮助。

(编辑:航空爱好网)

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

    推荐文章