编程 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 开发工具收集

Apr 17 HTML / CSS

基于CSS3实现的漂亮Menu菜单效果代码

Sep 10 HTML / CSS

css3如何绘制一个圆圆的loading转圈动画

Jan 09 HTML / CSS

简单几步用纯CSS3实现3D翻转效果

Jan 17 HTML / CSS

CSS3实现酷炫的3D旋转透视效果

Nov 21 HTML / CSS

html5 canvas 画图教程案例分析

Nov 23 HTML / CSS

谈一谈HTML5本地存储技术

Mar 02 HTML / CSS

导出HTML5 Canvas图片并上传服务器功能

Aug 16 HTML / CSS

处理textarea中的换行和空格

Dec 12 HTML / CSS

详解HTML5常用的语义化标签

Sep 27 HTML / CSS

HTML5实现应用程序缓存(Application Cache)

Jun 16 HTML / CSS

CSS 左边固定宽右边自适应的6种方法

May 15 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 SEO优化之URL优化方法

2011/04/21 PHP

PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案

2016/09/19 PHP

PHP生成各种随机验证码的方法总结【附demo源码】

2017/06/05 PHP

关于laravel-admin ueditor 集成并解决刷新的问题

2019/10/21 PHP

js面向对象多种创建对象方法小结

2012/05/21 Javascript

js confirm()方法的使用方法实例

2013/07/13 Javascript

jQuery实现简单的列表式导航菜单效果代码

2015/08/31 Javascript

jQuery validate插件实现ajax验证重复的2种方法

2016/01/22 Javascript

JS封装的选项卡TAB切换效果示例

2016/09/20 Javascript

原生JS实现简单放大镜效果

2017/02/08 Javascript

JS 组件系列之 bootstrap treegrid 组件封装过程

2017/04/28 Javascript

关于Vue背景图打包之后访问路径错误问题的解决

2017/11/03 Javascript

JS数组扁平化、去重、排序操作实例详解

2020/02/24 Javascript

JavaScript Window浏览器对象模型原理解析

2020/05/30 Javascript

[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示

2017/07/15 DOTA

pygame学习笔记（6）：完成一个简单的游戏

2015/04/15 Python

Python3 模块、包调用&路径详解

2017/10/25 Python

python DataFrame 取差集实例

2019/01/30 Python

Python List cmp()知识点总结

2019/02/18 Python

django连接oracle时setting 配置方法

2019/08/29 Python

使用python快速实现不同机器间文件夹共享方式

2019/12/22 Python

tensorflow实现在函数中用tf.Print输出中间值

2020/01/21 Python

pycharm设置当前工作目录的操作(working directory)

2020/02/14 Python

python中upper是做什么用的

2020/07/20 Python

土耳其风格手工珠宝：Ottoman Hands

2019/07/26 全球购物

Hobbs官方网站：英国奢华女性时尚服装

2020/02/22 全球购物

经典c++面试题五

2014/12/17 面试题

大学新生军训个人的自我评价

2013/10/03 职场文书

四年级评语大全

2014/04/21 职场文书

学习党的群众路线对照检查材料

2014/09/29 职场文书

2014年度个人总结范文

2015/03/09 职场文书

公司停电通知

2015/04/15 职场文书

第一军规观后感

2015/06/12 职场文书

2016年国庆节宣传标语

2015/11/25 职场文书

MySQL如何快速创建800w条测试数据表

2022/03/17 MySQL

Lakehouse数据湖并发控制陷阱分析

2022/03/31 Oracle