网页制作 
首页 > 网页制作 > 浏览文章

css实现背景虚化效果的示例代码

(编辑:jimmy 日期: 2024/12/28 浏览:3 次 )

是不是下面的效果,是的话那就继续往下看!

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编写就可以实现你想要的背景图虚化效果喽!

总结

上一篇:CSS3实现淘宝留白的方法
下一篇:浅谈Flex布局与缩放比例计算
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap