css 半透明渐变图片

摘要

正在生成中……

在某站看到一个半透明渐变的图片效果，如图：

我查看了这个效果的实现，HTML结构是这样的

<div class="intro_img">
    <img src="人物图片.jpg">
    <div class="tc"></div>
</div>

关键的几个CSS结构如下：

.intro_cont .intro_img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 450px;
    z-index: 2;
}

.intro_cont .intro_img img {
    height: 100%;
    display: block;
}

.intro_cont .intro_img .tc {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url(../images/jb.png) no-repeat left center;
}

其实挺简单的，.intro_img父容器使用绝对定位，用于给子元素作为定位元素，并定义了一个高度属性，img标签把height 设置成100%，在容器铺开，这些都没什么特别的。

关键点在.tc这个元素，使用绝对定位，它用的背景图片是一张半透明，透明度从左到右逐渐递增的png图片，并且z-index的值最大，这样就让它位于在人物图片上方，相当加了一层半透明的滤镜。

这个效果好像比较复古，在现代的一点的浏览器，应该不需要半透明渐变的png图，用css的滤镜效果就能达成。

PS: 这个半透明的图片在下图： 

先不研究了，跑步跑步~~