CSS3中的opacity属性使用教程


Posted in HTML / CSS onAugust 19, 2015

RGBA和opacity

语法:

R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数| 百分数

A:透明度。取值0~1之间

CSS Code复制内容到剪贴板
  1. /* IE6 - 8 */  
  2. filter: alpha(opacity=80);   
  3. /* 其他 */  
  4. opacity: 0.8;  

CSS3中的opacity属性使用教程

RGBA比元素设置CSS的透明度更好,因为单独的颜色可以在不影响整个元素的透明度,他不会影响到元素其他的属性,比如说边框,字体同时也不会影响到其他元素的相关透明度。

opacity的使用

opacity声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。

浏览器兼容性

opacity是浏览器支持最好的一个CSS3元素…当然,除了IE!
CSS3透明(例1:层)
CSS3中的opacity属性使用教程

上面的透明例子使用了下面的样式:

CSS Code复制内容到剪贴板
  1. div.opacityL1 { background:#036; opacity:0.2; width:575pxheight:20px; }     
  2. div.opacityL2 { background:#036; opacity:0.4; width:575pxheight:20px; }     
  3. div.opacityL3 { background:#036; opacity:0.6; width:575pxheight:20px; }     
  4. div.opacityL4 { background:#036; opacity:0.8; width:575pxheight:20px; }     
  5. div.opacityL5 { background:#036; opacity:1.0; width:575pxheight:20px; }    

浏览器支持:

    Firefox 3.05+
    Google Chrome 1.0+
    Internet Explorer 8-
    Opera 9.6+
    Safari 3.2.1+

CSS 3 透明(例2:图片)
CSS3中的opacity属性使用教程

我们也可以在图片上使用不同透明度的透明效果,就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上,实现一种链接的鼠标经过效果。

CSS Code复制内容到剪贴板
  1. img.opacity1 { opacity:0.25; width:150pxheight:100px; }     
  2. img.opacity2 { opacity:0.50; width:150pxheight:100px; }     
  3. img.opacity3 { opacity:0.75; width:150pxheight:100px; }    

浏览器支持:

    Firefox 3.05+
    Google Chrome 1.0.154+
    Internet Explorer IE8-
    Opera 9.6+
    Safari 3.2.1+

HTML / CSS 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
分享几个实用的CSS代码块
Jun 10 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 #HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 #HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 #HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 #HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 #HTML / CSS
详解CSS3中@media的实际使用
Aug 04 #HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 #HTML / CSS
You might like
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php二维码生成以及下载实现
2017/09/28 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
DWR Ext 加载数据
2009/03/22 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python性能优化的20条建议
2014/10/25 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
python批量爬取下载抖音视频
2019/06/17 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
关于梦想的演讲稿
2014/05/05 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
公司租车协议书
2015/01/29 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
运动会新闻稿
2015/07/17 职场文书
结婚十年感言
2015/07/31 职场文书
靠谱的活动总结
2019/04/16 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang