代码之家(www.adminjie.com)精品网站源码,微信源码,游戏源码分享平台。《交流群:1037940574》
当前位置:网站首页 技术文章 网页制作 正文

css如何实现模糊背景效果

时间:2020-07-06 [网页制作]作者:adminjie 浏览:183 次

普通背景模糊

为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢?我们可以使用伪元素,这样我们也顺便解决了白边的问题。

实现思路:

在父容器中设置背景,并且使用相对定位,方便伪元素重叠。而在:after中只需要继承背景,并且设置模糊,绝对定位覆盖父元素即可。这样父容器中的子元素便可不受模糊度影响。因为伪元素的模糊度不能被父元素的子代继承。

html布局

<div class="bg">     <div class="drag">like window</div>  </div>

css代码:

/*背景模糊*/  .bg{      width:100%;      height:100%;      position: relative;      background: url("../image/banner/banner.jpg") no-repeat fixed;      padding:1px;      box-sizing:border-box;      z-index:1;  }  .bg:after{      content: "";      width:100%;      height:100%;      position: absolute;      left:0;      top:0;      background: inherit;      filter: blur(2px);      z-index: 2;  }  .drag{      position: absolute;      left:50%;      top:50%;      transform: translate(-50%,-50%);      width:200px;      height:200px;      text-align: center;         z-index:11;  }

当然,看了上面的代码就能发现父容器下面的子代元素也是要使用绝对定位的,但是这个不会影响到后面的布局的,所以请放心使用。要注意的地方是要使用z-index确定层级关系,必须确保子代元素(也就是这里的drag)是在最上层的。不然子代元素的文字是不会出现的。

效果:

css如何实现模糊背景效果  2

背景局部模糊

相比较上一个效果而言,背景局部模糊就比较简单了。这时父元素根本就不用设置伪元素为模糊了。直接类比上面的代码把子元素模糊掉,但是子元素的后代可能不能模糊了(这点要注意,解决办法就是上一个效果的描述那样)。

HTML布局:

<div class="bg">     <div class="drag">          <div>like window</div>     </div>  </div>

css代码:

/*背景局部模糊*/  .bg{      width:100%;      height:100%;      background: url("../image/banner/banner.jpg") no-repeat fixed;      padding:1px;      box-sizing:border-box;      z-index:1;  }  .drag{      margin:100px auto;      width:200px;      height:200px;         background: inherit;         position: relative;  }  .drag >div{      width:100%;      height: 100%;      text-align: center;      line-height:200px;      position: absolute;      left:0;      top:0;      z-index: 11;  }  .drag:after{      content: "";      width:100%;      height:100%;      position: absolute;      left:0;      top:0;      background: inherit;      filter: blur(15px);/*为了模糊更明显,调高模糊度*/      z-index: 2;  }

效果如下:

css如何实现模糊背景效果  2


背景局部清晰

背景局部清晰这个效果说简单也不简单,说难也不难。关键还是要应用好background:inherit属性。这里可不能使用transform让它垂直居中了,大家还是选择flex布局吧。如果这里再使用transform属性的话会让背景也偏移的。这样就没有局部清晰的效果了。

html布局同上。

css代码:

/*背景局部清晰*/  .bg{      width:100%;      height:100%;      position: relative;      background: url("../image/banner/banner.jpg") no-repeat fixed;      padding:1px;      box-sizing:border-box;  }  .bg:after{      content: "";      width:100%;      height:100%;      position: absolute;      left:0;      top:0;      background: inherit;      filter: blur(3px);      z-index: 1;  }  .drag{      position: absolute;      left:40%;      top:30%;      /*transform: translate(-50%,-50%);*/      width:200px;      height:200px;      text-align: center;         background: inherit;      z-index:11;         box-shadow:  0 0 10px 6px rgba(0,0,0,.5);  }

效果:

css如何实现模糊背景效果  2

以上就是css如何实现模糊背景效果的详细内容


转载请注明来源:css如何实现模糊背景效果

本文永久链接地址:https://www.adminjie.com/post/3105.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:点此维权 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 代码之家会员升级
  • 最新文章
  • 阿里云大优惠
  • 热门文章