开发者学堂课程【零基础学前端 HTML+CSS：图像的透明】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5148
图像的透明
内容介绍
一、图像透明的介绍
二、CSS 创建透明图像的操作示例
一、图像透明的介绍
注释：CSS opacity 属性是 W3C CSS 推荐标准的一部分。
filter:alpha(opacity=XX) 是 IE 滤镜 //早期滤镜的一种转译，现在是比较通用透明的属性，一般使用在图像上
.transparent_class{filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5; //透明度
}
//兼容代码
//以前插入默认的图像都是不透明的
二、CSS 创建透明图像的操作示例
示例代码：
<div id=”color”>
<img src=”images\Penguins.jpg” class=”imgcolor”>
</div>
#color{
width:500px;
height:500px;
background-color:rgb(255,0,0);
}
#color2{
width:500px;
height:500px;
background-color:rgb(255,0,0.5);
}
.imagcolor{
opacity:0.5;
}
<div id=”color”>
</div>
呈现效果如下：
//图片的前置背景是红色，所以图片半透明到红色上，如果将 opacity:0.5 的值进行修改，改为 1，就是原始初始化的值，改成0就是完全透明隐藏的，则透明的颜色随着的改变而改变。值的范围（0-1）。
<div id=”color”><img src=”images\Penguins.jpg”class=”imgcolor”>插入到本身就是半透明的图片里
-moz-opacity:0.5;兼容代码，在其他浏览器里生成效果，如果显示不出来，就要添加这种兼容代码，尤其针对版本较旧的浏览器，这种效果并不是所有浏览器都支持。
