当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | .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的变化:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | .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% ;
width : 200px ;
height : 200px ;
text-align : center ;
background : inherit;
z-index : 11 ;
box-shadow: 0 0 10px 6px rgba( 0 , 0 , 0 ,. 5 );
}
|
效果展示:
更多编程相关知识,请访问:编程入门!!
以上就是详解三种CSS3模糊背景效果(代码实例)的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
jquery attr与css区别是什么
css实现文本两端对齐的代码实例讲解
css宽高不固定如何实现居中
css td文字不换行如何实现
css columns属性怎么用
html中表格tr的td单元格怎么设置宽度属性
css如何实现div闪烁
css是干什么的
css怎么设置表格线
css中的块级元素和行内元素(内联元素)有哪些
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解三种CSS3模糊背景效果(代码实例)