编程 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中:nth-child和:nth-of-type的区别深入理解

Mar 10 HTML / CSS

css3实现超立体3D图片侧翻倾斜效果

Apr 16 HTML / CSS

用CSS3写的模仿iPhone中的返回按钮

Apr 04 HTML / CSS

深入浅析css3 中display box使用方法

Nov 25 HTML / CSS

css3 中的新特性加强记忆详解

Apr 16 HTML / CSS

html5使用canvas实现图片下载功能的示例代码

Aug 26 HTML / CSS

HTML5拖放功能_动力节点Java学院整理

Jul 13 HTML / CSS

HTML5教程之html 5 本地数据库（Web Sql Database）

Apr 03 HTML / CSS

HTML5所有标签汇总及标签意义解释

Mar 12 HTML / CSS

HTML5 LocalStorage 本地存储刷新值还在

Mar 10 HTML / CSS

html5用video标签流式加载的实现

May 20 HTML / CSS

AmazeUI中各种的导航式菜单与解决方法

Aug 19 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 UTF8 文件的签名问题

2009/10/30 PHP

浅谈discuz密码加密的方式

2014/05/22 PHP

在Debian系统下配置LNMP的教程

2015/07/09 PHP

php实现用户登陆简单实例

2017/04/04 PHP

php中类和对象：静态属性、静态方法

2017/04/09 PHP

javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系

2010/02/04 Javascript

js 事件处理函数间的Event物件是否全等

2011/04/08 Javascript

jQuery 1.9移除了$.browser可以使用$.support来替代

2014/09/03 Javascript

jquery ajax双击div可直接修改div中的内容

2016/03/04 Javascript

JS中sort函数排序用法实例分析

2016/06/16 Javascript

vue 2.0项目中如何引入element-ui详解

2017/09/06 Javascript

Sublime Text新建.vue模板并高亮(图文教程)

2017/10/26 Javascript

详述 Sublime Text 打开 GBK 格式中文乱码的解决方法

2017/10/26 Javascript

JavaScript实现的超简单计算器功能示例

2017/12/23 Javascript

React实现全局组件的Toast轻提示效果

2018/09/21 Javascript

详解如何在vue项目中使用eslint+prettier格式化代码

2018/11/10 Javascript

Vue入门学习笔记【基本概念、对象、过滤器、指令等】

2019/04/13 Javascript

通过实例了解js函数中参数的传递

2019/06/15 Javascript

Ant Design Pro 下实现文件下载的实现代码

2019/12/03 Javascript

微信小程序点击item使之滚动到屏幕中间位置

2020/03/25 Javascript

node koa2 ssr项目搭建的方法步骤

2020/12/11 Javascript

[01:32]TI珍贵瞬间系列（一）

2020/08/26 DOTA

如何利用python查找电脑文件

2018/04/27 Python

解决pycharm py文件运行后停止按钮变成了灰色的问题

2018/11/29 Python

实例详解python函数的对象、函数嵌套、名称空间和作用域

2019/05/31 Python

Python3 执行Linux Bash命令的方法

2019/07/12 Python

浅析python，PyCharm，Anaconda三者之间的关系

2019/11/27 Python

OpenCV 之按位运算举例解析

2020/06/19 Python

HTML5重塑Web世界它将如何改变互联网

2012/12/17 HTML / CSS

纪伊国屋新加坡网上书店：Kinokuniya新加坡

2017/12/29 全球购物

办加油卡单位介绍信

2014/01/09 职场文书

农村结婚典礼司仪主持词

2014/03/14 职场文书

教师创先争优承诺书

2015/04/27 职场文书

于丹讲座视频观后感

2015/06/15 职场文书

六一亲子活动感想

2015/08/07 职场文书

MySQL中LAG()函数和LEAD()函数的使用

2022/08/14 MySQL