详情介绍
普通背景模糊
为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢?我们可以使用伪元素,这样我们也顺便解决了白边的问题。
实现思路:
在父容器中设置背景,并且使用相对定位,方便伪元素重叠。而在:after中只需要继承背景,并且设置模糊,绝对定位覆盖父元素即可。这样父容器中的子元素便可不受模糊度影响。因为伪元素的模糊度不能被父元素的子代继承。
html布局
<div class="bg"> <div class="drag">www.98sucai.com</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; }
1、升级本站永久VIP,仅需【49】元即可升级 ! ! ! (升级后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再支付下载!
- 上一篇:layui表单提交为什么有两次
- 下一篇:没有了!
评论(0)条