CSS 背景图片虚化

html-css020

CSS 背景图片虚化,第1张

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

实现的方法和详细的操作步骤如下：

1、首先，打开要处理的文档，如下图所示。

2、其次，双击文档中的图片，此图片的初始状态如下。

3、接着，双击图片后，在界面右侧出现设置图片格式的窗口，展开“柔化边缘”选项，将大小根据实际情况要求进行设置，如下图所示。

4、最后，设置柔化边缘后，就达到了边框虚化的效果了，如下图所示。这样，以上的问题就解决了。

把图片背景虚化在ps打开“调整边缘”面板，从样式里选择黑白，这样能更好的预览边缘的细节变化，半径数值大小要按照片的具体情况而定，选择1.8，以平滑边缘，减少锯齿。然后选择“渐变工具”，模式设为“线性加深”，其它参数默认，渐变工具从照片底部向上渐变，渐变多长，要看照片需要虚化范围有多大。