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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
smarty模板数学运算示例
2016/12/11 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
php curl发送请求实例方法
2019/08/01 PHP
php服务器的系统详解
2019/10/12 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
JS控制表单提交的方法
2015/07/09 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
python选择排序算法实例总结
2015/07/01 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
六行python代码的爱心曲线详解
2019/05/17 Python
python SVD压缩图像的实现代码
2019/11/05 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
给酒店员工的表扬信
2014/01/11 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP