CSS 背景图片虚化

html-css027

CSS 背景图片虚化,第1张

背景图片虚化主要依靠的是 filter: blur(15px) 这个css属性 blur值 越大 模糊程度也越大 最终我们希望的效果图是这样的 实现方式： 第一步 一个大的 div 里面包裹两个 小的 div1 和 div2 第二步 div1元素加入背景、宽高、过滤（filter)、浮动 第三步 div2元素 开启定位 absolute（一定要脱离普通文档流） 现在基本的效果就实现了，想让页面更美观 剩下的就要自己动手喽 关键点就是 filter属性 ：让图片模糊 脱离普通文档流 ：内容放到模糊div1 的上面

filter 属性定义了元素(通常是img)的可视效果(例如：模糊与饱和度)。

语法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

使用效果： 查看demo

demo 是我的GitHub主页，当鼠标放在圆形上面的时候，圆形会旋转，这里主要应用了 animation 属性。而绿色圆形的下面那层投影的模糊效果则是运用了下面这条属性:

而完整卡片又该怎么写呢？

首先是它的 <html>结构：

CSS样式：

圆角背景：

圆形样式：

投影层的样式：

文字的样式：

如此，便可不用一张图，写出这张卡片了。