CSS层叠样式淡化图象

html-css015

CSS层叠样式淡化图象,第1张

在<head>区域加入代码:

<style type="text/css">

<!--

.alpha { filter: Alpha(Opacity=30,

FinishOpacity=0, Style=1, StartX=0, StartY=0,

FinishX=100, FinishY=100)}

-->

</style>

在图象连接后加代码:

<IMG SRC="images/js.jpg" class="alpha">

设置图片的透明度即可

img{

    opacity:0.5

    filter:alpha(opacity=50) /* 针对 IE8 以及更早的版本 */

}

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