香港高速VIP云机房火爆上线啦!无需备案,开通即用!配套《巅云自助建站系统3.0》将带给您飞一般的可视化拖拽建站体验,欢迎免费体验。

详解CSS3的opacity属性设置透明效果的用法

一佰互联网站制作(www.yinxi.net) 发布日期 2019-04-21 17:24:56 浏览数: 17

CSS3 opacity 属性的功能是用来控制网页元素的透明效果(调整不透明度),早期网页设计常常会用到许多的透明效果,通常都是透过 png 图层来制作透明的感觉,现在网页设计师可以使用 CSS3 opacity 属性来轻松的达到网页元素不透明度的调整,CSS3 opacity 属性的语法非常简单,只需要透过数字的调整,就能呈现出不同的不透明度,进而设计出相当具有现代感的网页风格,可应用在网页图片、DIV 区块、span 区域、Table 表格 ... 等元素,所有新版的主流浏览器都支援 CSS3 opacity 属性的效果。

CSS3 opacity 属性基本语法
opacity: 不透明度;
CSS3 opacity 属性参数的"不透明度"是以数字表示,从 0.0 至 1.0 都可以,完全透明是 0.0,完全不透明是 1.0,换句话说,数字越大代表元素越不透明。参数除了可以使用"不透明度"之外,还有 inherit 继承父层属性,不过浏览器支援度较差,不建议使用。

CSS3 opacity 属性实际范例

CSS Code复制内容到剪贴板
  1. <div style="padding:10px;background-color:green;opacity:0.1;">   
  2. 测试 CSS3 opacity 属性的不透明度处理   
  3. </div>   
  4. <div style="padding:10px;background-color:green;opacity:0.5;">   
  5. 测试 CSS3 opacity 属性的不透明度处理   
  6. </div>   
  7. <div style="padding:10px;background-color:green;opacity:0.8;">   
  8. 测试 CSS3 opacity 属性的不透明度处理   
  9. </div>  

范例的输出效果

范例共准备了三个加入 opacity 效果的 DIV 区块,各位可以注意到从最上面开始的第一个区块,不透明度为 0.1(opacity:0.1)所以整个区块变成几乎快看不到颜色与文字,第二个区块不透明度设为 0.5(opacity:0.5),所以比第一个区块清楚多了,第三个区块再度降低不透明度到 0.8,文字与背景颜色都越更加明显,这就是 CSS3 opacity 属性的实际效果,由范例可以很清楚的看到,一个 DIV 区块内的文字内容与背景颜色(background-color)都会受到 opacity 属性的不透明度影响。

补充:目前新版的主流浏览器均有支援 CSS3 opacity 属性,但需要注意的是 IE8 以即更早版本的 IE 浏览器必须使用替代语法来实做,所谓的替代语法是利用 filter 属性,写法如「filter:Alpha(opacity=50);」,效果等于「opacity:0.5」。

opacity透明度属性的继承问题
CSS3的opacity透明度属性具有继承性,当对某个对象设置了opacity透明度属性的时候,其子集元素也会有透明度效果;

XML/HTML Code复制内容到剪贴板
  1. <div class="main">  
  2.   <div class="div1">  
  3.     <p>背景色为rgb的opacity效果</p>  
  4.   </div>  
  5.   <div class="div2">  
  6.     <p>背景色为rgba的透明效果</p>  
  7.   </div>  
  8. </div>  

CSS:

CSS Code复制内容到剪贴板
  1. .main{   
  2.   clear:rightright;   
  3.   margin:20% auto;   
  4.   overflow:hidden;   
  5.   width:335px;   
  6. }   
  7. .main div{   
  8.   color:red;   
  9.   float:left;   
  10.   display:inline-block;   
  11.   width:160px;   
  12.   height:160px;   
  13.   text-align:center;   
  14. }   
  15. /*使用opacity透明属性的显示效果*/  
  16. .div1{background-color:rgb(0,0,0);   
  17.   opacity:0.5;   
  18.   filter:alpha(opacity=50);   
  19.   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";margin-right:15px;   
  20. }   
  21. .div1 p{   
  22.   position:relative;   
  23. }   
  24. /*使用rgba色显示的效果*/  
  25. .div2{   
  26.   background:rgba(0,0,0,.5)   
  27. }  

总结: 使用rgba的背景色可以很直接的设置对象的透明度效果,而且对其子集元素没有继承性;而使用rgb色并设置opacity透明度属性的对象却产生了透明度继承。

不过,可能你把整个代码都copy下来并在IE9以下的浏览器都测试的话,你会发现在IE7、IE8浏览器中出现了设置opacity透明度属性的对象中子集元素并没有继承父集元素的透明度效果,并且设置了背景色为rgba的对象反而没有任何效果。这是因为: 在设置了opacity透明度属性的对象中的子集元素设置了position:relative属性,这才使得它在IE9以下的浏览器中得到了解决;其次在IE9以下的浏览器并不兼容rgba色,所以,你会看到第二种的背景色没有效果。

一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

11
04月
面试苹果被拒绝后,我重新设计了Apple M

译者小船:今年早些时候,我向Apple Music(一生的机会)申请平面设计实习,但是被客气的拒绝了,他们表示尽管非常喜欢我的这个项目,但是... >>详情

01
04月
水果电商推广:一个桃子的爆棚营销实战

简介:每一个运营公众号的朋友,都会面临如何把自己的公众号推广出去的烦恼,不花钱最好,少花点钱如果有效果领导肯定也会支持。但多数时候自己都是心... >>详情

11
05月
专业网站设计需要注意哪些

在网站的设计的时候需要注意哪些事情.我们在这里为你说说.让你的设计的风格变得非常的好.同时让企业的网页变得非常的好.自然在这个时候是离不开优... >>详情

04
05月
百度将首页降权如何恢复的5个办法

1、减少该页面关键字词密度2、title长度减少,不相关的关键字词删除,违反国家政策等词语全部删除。3、减少堆积(这点很重要)4、保持更新5... >>详情

营业执照. cdn加速服务 备案系统认证 网络安全协会 我们的支付方式AAA认证
上海 北京 深圳 广州 天津 杭州 南京 武汉 成都 沈阳 大连 长沙 济南 青岛 苏州 福州 无锡 哈尔滨 宁波 重庆 大庆 厦门 西安 长春 珠海 郑州 海口 昆明 太原 石家庄 温州 合肥 乌鲁木齐 南宁 南通 合肥 兰州 呼和浩特 贵阳 烟台 秦皇岛 包头 唐山 银川 汕头 连云港 威海 西宁 湛江 北海 万州 涪陵 长寿 黔江 永川 丰都 忠县 江津 南川 开县 云阳 万盛 梁平 垫江 巫山 城口 建站宝盒 免费建站 门户网站建设 微信网站 手机网站 门户网站制作

7x24小时服务电话:18581389571 传真:023-85725751 免费建站交流群:236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 网站投诉:
重庆楚捷科技有限公司 一佰互联©版权所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保护,网站法律顾问:ITLAW-庄毅雄律师
中华人民共和国信息产业部网站备案号:渝ICP备12000592号