CSS3不透明度实例讲解


Posted in HTML / CSS onApril 26, 2016

如何设置透明度?定义opacity属性,通过设置该属性能够使任何元素呈现出半透明效果,opacity属性的基本语法如下:

<alphavalue>|inherit

取值说明:

1、<alphavalue>|是由浮点数和单位标识符组成的长度值。不可为负值,默认值为1.opacity取值为1时,则元素为完全不透明的;反之,取值为0时,元素是完全透明的,不可见。

2、inherit表示继承,即继承父元素的不透明性。

3、针对IE浏览器,可以使用它的私有属性filter来兼容:filter:alpha(alpha=value);。

实例:设计灯箱广告背景布

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>opacity</title>  
  6. <style type="text/css">  
  7. body {   
  8.     margin:0;   
  9.     padding:0;   
  10. }   
  11. div { position:absolute; }   
  12. .bg {   
  13.     width:100%;   
  14.     height:100%;   
  15.     background:#000;   
  16.     opacity:0.7;   
  17.     filter:alpha(opacity=70);   
  18. }   
  19. .lightbox {   
  20.     left:50px;   
  21.     top:50px;   
  22. }   
  23. </style>  
  24. </head>  
  25.   
  26. <body>  
  27. <div class="web"><img src="images/web_bg_9.jpg" width="1259" height="630" /></div>  
  28. <div class="bg"></div>  
  29. <div class="lightbox"><img src="images/web_bg_10.png" width="80%" /></div>  
  30. </body>  

演示效果图:

CSS3不透明度实例讲解

以上就是本文的全部内容,希望对大家的学习有所帮助。

HTML / CSS 相关文章推荐
CSS3中Color的一些特性介绍
May 27 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
HTML中的表格元素介绍
Feb 28 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 #HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 #HTML / CSS
纯CSS3代码实现文字描边
Apr 25 #HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 #HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 #HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 #HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 #HTML / CSS
You might like
php中字符串和正则表达式详解
2014/10/23 PHP
smarty简单应用实例
2015/11/03 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
js+html实现点名系统功能
2019/11/05 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python根据时间获取周数代码实例
2019/09/30 Python
python实时监控logstash日志代码
2020/04/27 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
QQ空间主人寄语大全
2014/04/12 职场文书
投标承诺书怎么写
2014/05/24 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
小学运动会入场词
2015/07/18 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
详解Python中*args和**kwargs的使用
2022/04/07 Python