编程 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无js实现的Android Logo(有简单动画)

Jan 21 HTML / CSS

在HTML5中如何使用CSS建立不可选的文字

Oct 17 HTML / CSS

利用CSS3 动画绘画圆形动态时钟

Mar 20 HTML / CSS

css3媒体查询中device-width和width的区别详解

Mar 27 HTML / CSS

html5教程实现Photoshop渐变色效果

Dec 04 HTML / CSS

详解HTML5中的picture元素响应式处理图片

Jan 03 HTML / CSS

html5简介及新增功能介绍

May 18 HTML / CSS

关于CSS浮动与取消浮动的问题

Jun 28 HTML / CSS

html form表单基础入门案例讲解

Jul 15 HTML / CSS

CSS实现单选折叠菜单功能

Nov 01 HTML / CSS

分享CSS盒子模型隐藏的几种方式

Feb 28 HTML / CSS

聊聊CSS粘性定位sticky案例解析

Jun 01 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/08/19 PHP

WIFI万能钥匙密码查询接口实例

2015/09/28 PHP

PHP文件操作实例总结

2016/09/27 PHP

PHP串行化与反串行化实例分析

2016/12/27 PHP

php微信开发之关注事件

2018/06/14 PHP

PHP观察者模式实例分析【对比JS观察者模式】

2019/05/22 PHP

推荐一些非常不错的javascript学习资源站点

2007/08/29 Javascript

关于JS管理作用域的问题

2013/04/10 Javascript

JQuery 控制内容长度超出规定长度显示省略号

2014/05/23 Javascript

当前流行的JavaScript代码风格指南

2014/09/10 Javascript

JS & JQuery 动态添加 select option

2016/06/08 Javascript

教大家轻松制作Bootstrap漂亮表格（table）

2016/12/13 Javascript

Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

2017/08/01 jQuery

node实现登录图片验证码的示例代码

2018/04/20 Javascript

JS实现面向对象继承的5种方式分析

2018/07/21 Javascript

JS实现的全选、全不选及反选功能【案例】

2019/02/19 Javascript

实现一个 Vue 吸顶锚点组件方法

2019/07/10 Javascript

原生JS与CSS实现软件卸载对话框功能

2019/12/05 Javascript

iSlider手机端图片滑动切换插件使用详解

2019/12/24 Javascript

安装多版本Vue-CLI的实现方法

2020/03/24 Javascript

Python进行数据科学工作的简单入门教程

2015/04/01 Python

python3下使用cv2.imwrite存储带有中文路径图片的方法

2018/05/10 Python

python创建文件时去掉非法字符的方法

2018/10/31 Python

python实现flappy bird游戏

2018/12/24 Python

Python设计模式之备忘录模式原理与用法详解

2019/01/15 Python

如何用Python来理一理红楼梦里的那些关系

2019/08/14 Python

python使用pandas抽样训练数据中某个类别实例

2020/02/28 Python

python中adb有什么功能

2020/06/07 Python

简历中自我评价范文3则

2013/12/14 职场文书

艺校音乐专业自我鉴定范文

2014/03/01 职场文书

办公设备采购方案

2014/03/16 职场文书

环卫工人先进事迹材料

2014/06/02 职场文书

2014年“世界无车日”活动方案

2014/09/21 职场文书

机械专业毕业生自我鉴定2014

2014/10/04 职场文书

《飘》英文读后感五篇

2019/10/11 职场文书

发工资啦！教你用Python实现邮箱自动群发工资条

2021/05/10 Python