看完 《css 教程》中的《css 图像透明/不透明》，你对 CSS 中的半透明颜色可能已经有了基础的了解，CSS 透明算得上是一种相当流行的技术，但在跨浏览器支持上，对于开发者来说，可以说是一件令人头疼的事情。目前还没有一个通用方法，以确保透明度设置可以在目前使用的所有浏览器上有效，但是总得来说它是一个巨大的变革。关于 CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性，它是一种非标准技术，应该是 CSS3 规范的一部分。
.box{
width:300px;
height:200px;
margin:0 auto;
boxder:1px solid #ccc;
background:#000;
filter:alpha(opacity:30);
opacity:0.3;
color:red;}
如何用 CSS 实现背景半透明效果？我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。
不过如果你只需求在 IE 下实现，使用 CSS 实现透明度有很多方案，这里只是介绍大家通用的方法：
.transparent_class {
filter:alpha(opacity=50);//标准的css透明度，在大部分的标准浏览器Firefox, Safari, and Opera都有效
opacity:0.5;//兼容IE解决方案
-moz-opacity:0.5;//老的Mozilla browsers如NetscapeNavigator.几乎没有可以不需要
-khtml-opacity:0.5;//兼容老的Safari (1.x) 版本,很少可以不用 }
<script>
window.onload =function(){
var myDiv = document.getElementById("transparent_div");
myDiv.onclick =function(){
myDiv.style.opacity =".4";//针对所有通用浏览器
myDiv.style.filter ="alpha(opacity=40)";//针对IE浏览器}}
</script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({opacity:"0"});});
$("#btn2").click(function(){
$("#box").animate({opacity:"1"});});});
一、旧的Opacity设置
#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }
-khtml-opacity 设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。
#myElement { opacity: 0.7; }
#myElement { filter: alpha(opacity=40); }
#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=40)”;
}
<div style="opacity:0.4; background-image:url(/statics/images/w3c/intro.png)">
<div style="background-color:rgba(0, 0, 0, 0.4)">
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
如今，淘宝撑起了中国电商的半边天，淘宝店铺多如麻，淘宝竞争越来越激烈，除了大打价格战就是靠精美的店铺装修来吸引浏览者的驻...
CSS Margin(外边距) CSS Margin (外边距)属性定义元素周围的空间。CSS Margin 属性接受任何长度单位、百分数值甚至负值。Margin ...
HTML 编辑器HTML 编辑器是用于编写 HTML 的工具，使用 HTML 编辑器时以编辑主题，索引，自定义窗口，选择添加搜索页。使用 Notep...
响应式 Web 设计 - 图片使用 width 属性 如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能： 实例img {width: 100...
