CSS3教程(8):CSS3透明度指南


Posted in HTML / CSS onApril 02, 2009

CSS3透明…不透明…渐变…随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。
CSS3透明…不透明…渐变…随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。
其实这个firefox很久以前就支持了,而IE一直不支持!
上一篇文章:CSS3教程(7):CSS3嵌入字体
“opacity”声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。
浏览器兼容性
opacity是浏览器支持最好的一个CSS3元素…当然,除了IE! CSS3透明(例1:层)
CSS3教程(8):CSS3透明度指南
上面的透明例子使用了下面的样式:
div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; } div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; } div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; } div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; } div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }
浏览器支持:

  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8 RC1 )
  • Opera(9.6 …)
  • Safari(3.2.1 windows…) CSS 3 透明(例2:图片)
    CSS3教程(8):CSS3透明度指南
    我们也可以在图片上使用不同透明度的透明效果,就像上面的示例一样。一个很酷的应用是将opacity应用到:hover上,实现一种链接的鼠标经过效果。
    img.opacity1 { opacity:0.25; width:150px; height:100px; } img.opacity2 { opacity:0.50; width:150px; height:100px; } img.opacity3 { opacity:0.75; width:150px; height:100px; }
    浏览器支持:
    • Firefox(3.05 …)
    • Google Chrome(1.0.154 …)
    • Google Chrome(2.0.156 …)
    • Internet Explorer(IE7, IE8 RC1 )
    • Opera(9.6 …)
    • Safari(3.2.1 windows…)
HTML / CSS 相关文章推荐
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 #HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 #HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 #HTML / CSS
CSS3的新特性介绍
Oct 31 #HTML / CSS
CSS3属性选择符介绍
Oct 17 #HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 #HTML / CSS
细说CSS3中的选择符
Oct 17 #HTML / CSS
You might like
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
php实现的漂亮分页方法
2014/04/17 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
javascript中this的四种用法
2015/05/11 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python列表对象实现原理详解
2019/07/01 Python
python字典的常用方法总结
2019/07/31 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
python单例设计模式实现解析
2020/01/07 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
新店开张活动方案
2014/08/24 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL