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制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
5个HTML5的常用本地存储方式详解与介绍
CSS实现fullpage.js全屏滚动效果的示例代码
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
php下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
input标签内容改变的触发事件介绍
2014/06/18 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python3 下载网络图片代码实例
2019/08/27 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
什么是Python变量作用域
2020/06/03 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
酒店员工职业生涯规划
2014/02/25 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
自我管理的活动方案
2014/08/25 职场文书
先进班集体事迹材料
2014/12/25 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python