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的值来进行调节,值越大则越模糊。
实现效果就是,背景图片被模糊处理,而文本内容则不受影响。这样就能达到一个非常棒的视觉效果。