编程 HTML / CSS

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复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>opacity</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
div { position:absolute; }
.bg {
width:100%;
height:100%;
background:#000;
opacity:0.7;
filter:alpha(opacity=70);
}
.lightbox {
left:50px;
top:50px;
}
</style>
</head>
<body>
<div class="web"><img src="images/web_bg_9.jpg" width="1259" height="630" /></div>
<div class="bg"></div>
<div class="lightbox"><img src="images/web_bg_10.png" width="80%" /></div>
</body>

演示效果图：

CSS3不透明度实例讲解

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

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