CSS 背景图片虚化

html-css020

CSS 背景图片虚化,第1张

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

一、高斯模糊是使用ps等工具实现的，方法如下（以ps为例）：

1、在ps中打开背景图；

2、点击菜单栏中的滤镜；

3、点击模糊，再选择高斯模糊，如图；

5、通过调整半径来调整模糊的强度（半径越大越模糊），如图：

二、全屏显示的css代码：

.bg {

   background-image:url(scale.jpg)

   -moz-background-size: 100% 100%/*  Firefox 3.6 */

   -o-background-size: 100% 100%/* Opera 9.5 */

   -webkit-background-size: 100% 100%/* Safari 3.0 */

   background-size: 100% 100%/*  Firefox 4.0 and other CSS3-compliant browsers */

   -moz-border-image: url(scale.jpg) 0/* Firefox 3.5 */

   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale')/* for <ie9 */

}

这个难以言表，主要原因：

1.

浏览器自身问题，浏览器对图片的渲染解析不行

2.

网速过慢，触发小图片加载

3.

CSS解析不够

4.

页面不支持

5.

浏览器完美不支持

既然如此，那就干脆background图片或者是元素里面内联width="43%"算了