html css部分背景模糊效果,CSS3实现模糊背景的三种效果示例
不开头了,直接进入主题。
普通背景模糊效果如下:
使用属性:
filter:(2px)
普通背景模糊
为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢?我们可以使用伪元素,这样我们也顺便解决了白边的问题。
实现思路:
在父容器中设置背景,并且使用相对定位,方便伪元素重叠。而在:after中只需要继承背景,并且设置模糊,绝对定位覆盖父元素即可。这样父容器中的子元素便可不受模糊度影响。因为伪元素的模糊度不能被父元素的子代继承。
说了这么多,来点代码提提神。
简单的html布局:
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布局的情况下这样居中应该是比较简单的方法了。
那么这样写代码表现出来的效果是怎么样的呢?
背景局部模糊
相比较上一个效果而言,背景局部模糊就比较简单了。这时父元素根本就不用设置伪元素为模糊了。直接类比上面的代码把子元素模糊掉,但是子元素的后代可能不能模糊了(这点要注意,解决办法就是上一个效果的描述那样)。
HTML布局稍微变了一下:
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;
}
效果如下:
背景局部清晰
背景局部清晰这个效果说简单也不简单,说难也不难。关键还是要应用好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模糊背景内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
html css部分背景模糊效果,CSS3实现模糊背景的三种效果示例相关推荐
- html语言闪烁特效代码,css3 实现文字闪烁效果的三种方式示例代码
1.通过改变透明度来实现文字的渐变闪烁,效果图: 文字闪烁 星星之火可以燎原 .myclass{ letter-spacing:5px;/*字间距*/ color: red; font-weight: ...
- ios开发 html 字体模糊效果,CSS3实现苹果手机解锁的字体闪亮效果示例
0.前言 2016年08月18日 今天看到注意到苹果手机的滑动解锁,提示字上会有一道白光闪过,感觉很炫酷,所以突然就来了兴致想要做一个当鼠标放在字体上(模拟手指)时,白光一闪而过,照亮字体的效果. 1 ...
- MyBatis实现模糊查询的三种方式
MyBatis实现模糊查询的三种方式 准备 模糊查询 方式一 方式二 方式三 由于#{}是占位符本身,自带单引号,所以在模糊查询时需要一些技巧. 准备 数据库表 bean 模糊查询 以查询出所有用户名 ...
- CSS3 设置模糊背景图片
使用filter()函数实现模糊背景 使用方法: -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px ...
- html边框背景图片,css3 边框、背景、文本效果的实现代码
一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-sha ...
- python做花瓣飘落的背景_JavaScript_jquery+css3实现网页背景花瓣随机飘落特效,飘花效果的实现——效果图: - phpStudy...
jquery+css3实现网页背景花瓣随机飘落特效 飘花效果的实现--效果图: 查看演示 源码下载 需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jq ...
- html css小圆圈,jquery+css3实现会动的小圆圈效果
本文实例讲述了jquery+css3实现会动的小圆圈效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 那些变换颜色的小豆豆 h1{font-size:16px;} .circ ...
- lr背景虚化_人像摄影模糊背景的常用手法
模糊背景突出主体人物,这是人像摄影经常运用的手法.模糊背景突出主体这一手法使用很多初学摄影的朋友迷惑上瘾,总是希望每张人像照片的背景尽可能地模糊.不过更多的摄影朋友是抱怨自身条件不好,怪镜头光圈不够大 ...
- css3 渐变色 3种,css3实现渐变色文字的三种方法
css3样式代码实现渐变色文字的三种方法,有一定的参考价值,有需要的朋友可以参考或记录一下,希望对你有所帮助. 在开发过程中,UI设计师经常会设计一些带渐变文字的设计图,给到我们前端程序员,放在以前程 ...
最新文章
- 二十五、求单点的最短路径
- mybatis教程--映射之一对一查询
- 前中华英才产品总监高瑞:被嫌弃的产品经理的一生
- 海龟交易代码java_海龟交易算法,实现量化交易(1)数据获取
- Python学习札记(十三) Function3 函数参数二
- layui Form内容重置清空
- applicationContext.xml详解
- 小说全自动采集详细过程-支持各大开源小说CMS采集
- Mac影音多媒体工具软件推荐
- JAVA对接阿里语音识别引擎
- 金山毒霸推新产品金山卫士 正面狙击奇虎360
- 从软件架构演变看运维的分工与融合
- .Net Core WebApi 模型验证的处理
- freeradius在AP控制器设备中test-aaa 显示timeout的解决方案
- 常用生物信息 ID 及转换方法
- 【小技巧】一种简单的办法在verilog中处理小数运算
- AP计算机从懵懵懂懂到突飞猛进-----加利福尼亚学生满分经验分享!
- 使用Sendinput函数模拟鼠标键盘操作
- Redis:本地客户端连接远程服务器方法
- 女生嘴唇怎么画?写实厚涂的女生嘴唇绘画技巧