CSS透明效果总结

转载 2012年03月24日 22:23:05
如果网页中加入透明效果,即美观又漂亮,使用户的体验度提升很多,这次上海网站设计公司为您讲述该怎么样实现CSS的透明效果,以及使CSS技术兼容您的所有浏览器。


关于CSS 透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性。它是一种非标准技术,应该是CSS3规范的一部分。


一、旧的Opacity设置
以下代码是Firefox和Safari旧版本所需的透明度设置:


#myElement {      -khtml-opacity: .5;      -moz-opacity: 0.5;  }
-khtml-opacity设置是针对旧版本的Webkit渲染引擎,这种专用属性现在已经过时了,除非你还有需要兼容Safari 1.x.的用户。
第二行使用专用属性 -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属性详情,以及如何触发它,上海网站设计公司欢迎参考86215.com相关文档。
另外一个设置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”的方法。


四、使用JavaScript设置和改变CSS透明度
您可以使用下面的语法访问JavaScript中的CSS opacity 属性:


document.getElementById(“myElement”).style.opacity = ”.4〃;
// 针对所有现代浏览器  document.getElementById(“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);  }
        如同RGBA透明度,最后的数字表示透明度设置,跟RGBA起同样的作用。注意RGBA 和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的,但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响 背景颜色的透明度,说到这里是不是觉得很简单,呵呵,上海网站设计公司关于CSS的透明效果的讲解就说道这里,欢迎您继续关注上海网站设计公司的其他讲述。

相关文章推荐

CSS实现透明效果颜色的方法:RGBa

RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的: 1 2 3 div { background: rgba(200, 54, 54,...

CSS3----透明滤镜效果

支持主流浏览器,--Firefox,Chrome,IE7/8/9---IE6目前不支持 HTML: /*80%的透明效果:*/ <img ...
  • damys
  • damys
  • 2013-05-03 16:11
  • 741

CSS滤镜实现半透明效果,兼容IE,火狐,谷歌浏览器

转自:http://www.dianyisheji.com/?helpview-104 在做一个项目的前端开发的时,遇到这样一个问题,有一块内容是半透明效果,同时底层的背景图片需要能够实现更换,如图...

【前端】CSS实现背景图片透明和文字不透明效果

项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .d...

总结--IE6,IE7,IE8,火狐都支持:js/css 底部固定, 底部固定漂浮导航效果

在做项目的过程中遇到一个这样的问题,控制层在底部固定,最初用Position:fixed 是可以,但IE6不支持,最后在论坛上发了贴,得到了如下三种方法:第一:net_lover  的回答,他是用JS...

CSS选择器总结(代码实例+执行效果图)

CSS样式选择器代码实例: 1、标签选择器 2、类选择器 3、ID选择器 4、子选择器 5、包含选择器 6、通用选择器 7、伪类选择器

CSS3 动画效果总结

CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及anim...

CSS3转换过渡动画效果总结

内容摘要: 本篇主要介绍CSS3的一些动画效果设置,CSS3动画的实现原理,从转换、过渡、动画3个方式总结介绍。整体思路是个人原创,标准格式性内容摘自w3school.
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)