html实现⽂本框透明度,CSS透明实现⽅法
⼀、旧的opacity设置
以下代码是firefox和safari旧版本所需的透明度设置:
代码如下html内容文本框
#myelement {      -khtml-opacity: .5;      -moz-opacity: 0.5;  }
-khtml-opacity设置是针对旧版本的webkit渲染引擎，这种专⽤属性现在已经过时了，除⾮你还有需要兼容的⽤户。
第⼆⾏使⽤专⽤属性 -moz-opacity是 为了兼容mozilla渲染引擎的早期版本，以及追溯到netscape navigator。firefox 0.9以后就不要求使⽤-moz-opacity属性，firefox 3.5(现在使⽤gecko引擎)已经不在⽀持这个属性。
⼆、在firefox, safari, chrome和opera下的css透明度
以下代码是除了ie外的所有当前浏览器的最简单，最最新的不透明度设置的css语法：
代码如下
#myelement { opacity: .7; }
上述语法将设置⼀个元素为70％不透明(或30%透明)。设置opacity:1将使元素不透明，⽽设置opacity:0将使得元素完全不可见。你 只要记住“opacity”等同于“不透明”就很容易记住了，opacity值越⼩就越接近透明。
opacity属性可以精确地⼩数点后两位，所以值取“.01”和“.02”实际上是不同的，虽然可见度很难被发觉。⼀般情况下，精确到⼀位就可以了，取值如“.3”或“.7”。
三、ie下的css透明度
ie下照旧有别于其他浏览器，并且⽬前也有三个不同版本的ie在⼴泛使⽤，透明度设置是不同的，有时需要额外的css来控制：
代码如下
#myelement {      filter: alpha(opacity=40);  }
上⾯的css使⽤专⽤的filter属性来设置ie6-8透明度。对于ie6和ie7需要注意：为了使得透明设置⽣效，元素必须是“有布局”。⼀个元素可以通过使⽤⼀些css属性来使其被布局，有如width 和 position。关于微软专有的haslayout属性详情，以及如何触发它，欢迎参考
111cn相关⽂档。
另外⼀个设置ie8的css透明度的⽅法语法如下(注意注释中指出的版本)：
代码如下
#myelement {      filter: progid:dximagetransform.microsoft.alpha(opacity=40);
/* 第⼀⾏在ie6, ie7和ie8下有效 */ 代码如下
-ms-filter:      "progid:dximagetransform.microsoft.alpha(opacity=40)";
/*第⼆⾏仅在ie8下有效 */}
第⼀⾏代码针对当前所有ie版本，第⼆⾏仅针对ie8。
注意两⾏代码的不同之处：在第⼆⾏代码中，在filter属性前跟着-ms-前缀，并且属性值有加引号，这
些都是语法所必须的。
说实在，有了如前⼀个例⼦中⽤alpha(opacity=40)的语法来作⽤于任何版本的ie下的任何有布局的元素之后，我也不确定是否还有必要
⽤“progid”的⽅法。
四、使⽤⽹页特效设置和改变css透明度
您可以使⽤下⾯的语法访问javascript中的css opacity 属性：
代码如下
// 针对所有现代浏览器  lementbyid("myelement").style.filter =    "alpha(opacity=40)";
// 针对ie
上⾯的代码可以使⽤⾏内循环或者其他动态函数递增修改透明度的值。当然，你必须先通过特征检测来决定使⽤哪⼀⾏代码。
五、使⽤jquery设置和改变css透明度
直接使⽤jquery设置css透明度更直观更容易实现，因为在所有浏览器代码都⼀样，并且你不必担⼼在ie下元素是否“haslayout”：
$("#myelement").css({ opacity: .4 }); // 所有浏览器有效
您也可以使⽤⼀下jquery代码使⼀个元素动画透明：
$("#myelement").animate({      opacity: .4      }, 1000, function() {
// 动画完成，所有浏览器下有效  });
不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后⼀个属性是⼀个可选回调函数，将在动画完成后执⾏。
如果该元素的透明度在css中已经设定为“.4”，那在动画运⾏的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。
六、通过rgba的透明度
另⼀个css3技术只⽀持部分新的浏览器(firefox 3 , opera 10.1 , chrome 2 ,safari 3.1 )，可通过rgba的alpha通道的⽅式设定。语法如下：
#rgba {      background: rgba(98, 135, 167, .4);  }
在上⾯的定义中，通过rgb(前三个数字)给背景设定颜⾊，然后最后⼀个是alpha设置，以执⾏给定颜⾊的透明度。这个alpha设置跟opacity 属性⼀样，可设定任何0到1的数字，精确得到两位⼩数点。数字值越⼤，就越接近完全不透明的颜⾊。
七、通过 hsla的透明度
类似之前的定义，css3还允许使⽤hsla单独设置颜⾊和alpha值，hsla表⽰hue(⾊调), saturation(饱和度), lightness(亮度), 和alpha。以下是hsla透明的例⼦：
#hsla {      background: hsla(207, 38%, 47%, .4);  }
更多关于hsla颜⾊的解释，参考这篇来⾃w3.org的⽂章。如同rgba透明度，最后的数字表⽰透明度设置，跟rgba起同样的作⽤。注意rgba 和hsla透明度的⼀个重要的好处是这些透明度设置不会影响到⼦元素的，但通过opacity属性的⽅式则会。alpha设置的rgba和hsla只影响背景颜⾊的透明度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。