CSS是前端开发中非常重要的一个技能,其万能的功能使得我们可以实现各种炫酷的效果。今天我们来讲一下如何实现背景虚化文字不变的效果。
background: url('bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
以上是CSS的代码,接下来我们一一解释:
1. background: url('bg.jpg') no-repeat center center fixed;
这一行代码是设置背景图片,并使其居中固定。
2. background-size: cover;
这一行代码是设置背景图片的尺寸,保证其全屏铺满。
3. -webkit-filter: blur(5px);
这四行代码是设置背景图片的模糊程度,可以设置blur的值来进行调节,值越大则越模糊。
实现效果就是,背景图片被模糊处理,而文本内容则不受影响。这样就能达到一个非常棒的视觉效果。

