CSS3实现模糊背景的三种效果示例


Posted in HTML / CSS onMarch 30, 2021

不开头了,直接进入主题。
普通背景模糊效果如下:

CSS3实现模糊背景的三种效果示例

使用属性:

filter:(2px)

普通背景模糊

为了美观不能使背景前的文字模糊,而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)是在最上层的。不然子代元素的文字是不会出现的。

上面的代码还有一个保证div居中的方法,细心的同学应该已经注意到了吧!不使用flex布局的情况下这样居中应该是比较简单的方法了。

那么这样写代码表现出来的效果是怎么样的呢?

CSS3实现模糊背景的三种效果示例

背景局部模糊

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

效果如下:

CSS3实现模糊背景的三种效果示例

背景局部清晰

背景局部清晰这个效果说简单也不简单,说难也不难。关键还是要应用好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);
}

效果展示:

CSS3实现模糊背景的三种效果示例

到此这篇关于CSS3实现模糊背景的三种效果示例的文章就介绍到这了,更多相关CSS3模糊背景内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
5个HTML5的常用本地存储方式详解与介绍
CSS实现fullpage.js全屏滚动效果的示例代码
You might like
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
javascript globalStorage类代码
2009/06/04 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python做简单的字符串匹配详解
2017/03/21 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
const和static readonly区别
2013/05/20 面试题
财务方面个人工作的自我评价
2013/12/28 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
python正则表达式re.search()的基本使用教程
2021/05/21 Python
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL