CSS之透明度。

免费少儿编程开课啦，同学们好！今天分享的知识是为网页元素设置透明度，用到的是opacity属性和flter属性中的alpha函数。

·bordr：这两个方法都是设置透明度的，不同的是opacity属性是新的设置方法，而alpha函数是为了兼容老的浏览器，也就是IE8以前的版本使用的。这两个属性是可以同时存在的，并不冲突，可以覆盖所有浏览器的兼容性。

·border.p ppcity属性是很简单的，它可以接受小数点后两位的数字，也就是从0.01至1.00，代表了透明度的1%至100%，越接近0则越透明，越靠近1则越显现实体。

·alpha函数是CSS的内部函数，通常用来操作各种网页滤镜【我.爱.线.报.网.】，这是一个非常复杂且有用的函数，现在只需要利用到它的opacity参数值即可。这种设置的方式同opacity属性不同，它的值从1到100也是一百个数字，越接近1则越透明，反之则越不透明。不难看出alpha函数的方式编写更加麻烦一些。

·pacity属性更加简单，这也是新标准中替代掉它的原因之一。透明是可以有堆叠性的，如果一个元素有了透明度，而它下层含有元素时，在网页中下层的元素就会透过上层元素显示出来。

例如在这里，我插入了两张图片，并且设置它们的初始透明度为50%，在它们的下方，我写了两个H字母，字号为300PX，并通过前几章学过的绝对定位，position等于absolute和z-index等【我.爱.线.报.网.】于-1，将其放置在页面的左上角。

两张图片的下方来演示给你们看，可以看到被红色图片盖住的H字母部分和未被盖住的H字母部分颜色是有区别的。虽然图片在H的上方堆叠，但因为图片有50%的透明度，所以下方的H也被显示了出来，这样看可能不太明显，所以我还在图片中加了一个hover伪类。

当我的鼠标移动至图片上方时，图片的透明度变为1，也就是完全不透明。看到了吗？不透明时红色图片就完全盖住了H的部分，盖住的地方也就看不到了。

在这个例子中你们应该重点注意透明度的效果和绝对定位的应用。在下方我还设置了一个DIV标签，一个框套一个框，都是纯色背景，外框中是砖红色背景，百分之70透明度，可以看到H已经透出，而内框是3【我.爱.线.报.网.】0%透明度。就算两者叠加，H仍然可以看到。因为透明度是作用于对像上的，不同的对像就算重叠透明度也不会叠加。

更有意思的是DIV中的文字我并未设置透明度，但它默认从内框的透明度设置，也就是这个30%上继承，这样导致的结果就是原来设置的白色文字变为了灰色。这个实例的重点是透明度的叠加和文字对父级元素透明度的继承效果。

今天的分享就到这里，各位同学可以在汇总文档中尝试修改数值来查看不同的效果。所有的案例及相关文档均可向我获取，我们下期见。