css3怎么实现普通背景模糊效果

作者 : 3214567959 本文共798个字,预计阅读时间需要2分钟 发布时间: 2020-07-6 共240人阅读

详情介绍

普通背景模糊

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

实现思路:

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

html布局

  1. <div class=“bg”>
  2.    <div class=“drag”>www.98sucai.com</div>
  3. </div>

css代码:

  1. /*背景模糊*/
  2. .bg{
  3.     width:100%;
  4.     height:100%;
  5.     position: relative;
  6.     background: url(“../image/banner/banner.jpg”) norepeat fixed;
  7.     padding:1px;
  8.     boxsizing:borderbox;
  9.     zindex:1;
  10. }
  11. .bg:after{
  12.     content: “”;
  13.     width:100%;
  14.     height:100%;
  15.     position: absolute;
  16.     left:0;
  17.     top:0;
  18.     background: inherit;
  19.     filter: blur(2px);
  20.     zindex: 2;
  21. }
  22. .drag{
  23.     position: absolute;
  24.     left:50%;
  25.     top:50%;
  26.     transform: translate(-50%,-50%);
  27.     width:200px;
  28.     height:200px;
  29.     textalign: center;
  30.     zindex:11;
  31. }
1. 本站所有资源来源于用户上传和网络搜集,版权归原作者所有,如需商业用途或转载请与作者联系,因此不包含技术服务请大家谅解!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载,请联系客服处理!
3. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5.如有侵权请联系客服邮件3214567959@qq.com,我们会及时删除
码源站 » css3怎么实现普通背景模糊效果

发表评论

提供最优质的资源集合

立即查看 了解详情