您现在的位置是：网站首页> 编程资料编程资料
css3实现背景模糊的三种方式(小结)CSS设置背景模糊的实现方法CSS设置背景图片模糊内容不模糊的解决方法
2021-09-03
1058人已围观
简介 这篇文章主要介绍了css3实现背景模糊的三种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、普通背景模糊
代码：
背景模糊
效果如下所示：
这样写会使整个div的后代模糊并且还会出现白边，导致页面非常不美观，要想解决这个问题，我们可以使用伪元素，因为伪元素的模糊度不会被父元素的子代继承。
代码：
背景模糊
效果如下所示：
二、背景局部模糊
上一个效果会了之后，局部模糊效果就比较简单了。
代码：
背景局部模糊
效果如下图所示：
三、背景局部清晰
代码：
背景局部清晰
效果如下图所示：
到此这篇关于css3实现背景模糊的三种方式的文章就介绍到这了,更多相关css3背景模糊内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
相关内容
- CSS盒子隐藏/显示后再最上层的实现代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css中转换为行内样式的解决方案(css-inline)css之display属性之inline-block布局实现详解详解css中inline-block的最小宽度值详解CSS 去掉inline-block元素间隙的几种方法 css几种解决inline-block间隙的方案(整理)详解CSS中的display:flex||inline-flex属性css解决display:inline-block;产生的缝隙（间隙）的方法css display inline block 兼容性问题写法
- CSS实现波动水球效果的示例代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css使用@media响应式适配各种屏幕的方法示例详解使用CSS3的@media来编写响应式的页面 css3的@media属性实现页面响应式布局示例代码
- CSS设置div背景图的实现代码使用CSS cross-fade()实现背景图像半透明效果的示例代码完美解决webpack打包css背景图片路径问题CSS3为背景图设置遮罩并解决遮罩样式继承问题CSS背景图片设置的6个有趣的技巧CSS3 实现响应鼠标移动背景图片漂移效果的用户介绍卡片源码使用css写带纹理渐变背景图的示例代码
- CSS将img图片填满父容器div自适应容器大小的实现方法CSS实现宽高等比自适应容器的方法css实现图片自适应容器的示例代码css实现图片自适应容器的几种方式(小结)
- 一文掌握CSS 属性display:flow-root声明css之display属性之inline-block布局实现详解CSS中display flex整理（布局利器） 浅析css中使用border属性与display属性的方法CSS3中的display:grid，网格布局介绍
- CSS实现3D书本效果的示例代码纯CSS3实现3D旋转书本效果基于HTML5/CSS3实现的书本翻页3D动画特效源码 鼠标滑过书本自动翻页
- 修复一个因为scrollbar占据空间导致的bug问题CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解纯css修改浏览器scrollbar滚动条样式示例CSS教程：scrollbar的属性知识及样式分类介绍
- 详解CSS3实现响应式手风琴效果CSS3防疫知识图文响应式布局代码CSS3响应式个人名片图文布局代码css3 响应式媒体查询的示例代码HTML5 图片悬停放大的实现代码示例html用title属性实现鼠标悬停显示文字 html+css实现响应式卡片悬停效果
