CSS 背景图片虚化

html-css010

CSS 背景图片虚化,第1张

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

1．首先，看一下HTML，一个img图像控件和一个带有样式的div，其中包含文本。这个就是蒙版遮罩层。

2．然后，查看样式定义。先检查图像容器和图像样式，如图所示。其中要注意的是img_container样式里定义了position:relative，这个主要是为了遮罩层做绝对定位做准备的。

3．接着，查看遮罩层的样式定义。该代码如图所示。

背景：rgba（0，0，0，0．7）；

可以通过修改以下数字0．7来更改透明度。 1是完全不透明的，0是完全透明的。

4．随后，添加用于鼠标移动的脚本代码以显示遮罩层。该js代码是用jquery编写的，既方便又简单，因此首先介绍jquery脚本库。

5．然后，添加mouseover和mouseout事件，主要是当鼠标移到图像容器时显示遮罩层，并在鼠标移出时隐藏遮罩层。

6．刷新页面，可以看到页面上显示的普通图片。

7．最后，可以看到当鼠标放在图片上时，将显示遮罩层。

高斯模糊是PS、FW图片处理工具搞的。

全屏显示的方法1：使用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 */}2：使用 IMG 标签

<img class=stock style=position: absolutetop: 0pxleft: 0pxheight: 100%width: 100%src=default.jpg补充方法3：使用 CSS3 的背景 Cover

.bg {background: #000 url(scale.jpg) no-repeat center center

-webkit-background-size: cover

-moz-background-size: cover