编程 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 相关文章推荐

浅析两列自适应布局的3种思路

May 03 HTML / CSS

CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)

Jun 03 HTML / CSS

CSS3 Media Queries详细介绍和使用实例

May 08 HTML / CSS

CSS3制作Dropdown下拉菜单的方法

Jul 18 HTML / CSS

图解CSS3制作圆环形进度条的实例教程

May 26 HTML / CSS

css3 矩阵的使用详解

Mar 20 HTML / CSS

css3实现元素环绕中心点布局的方法示例

Jan 15 HTML / CSS

CSS3解析抖音LOGO制作的方法步骤

Apr 11 HTML / CSS

canvas实现有递增动画的环形进度条的实现方法

Jul 10 HTML / CSS

简单的HTML5初步入门教程

Sep 29 HTML / CSS

使用HTML5里的classList操作CSS类

Jun 28 HTML / CSS

详解三种方式实现平滑滚动页面到顶部的功能

Apr 23 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生成随机密码的几种方法

2011/01/17 PHP

php使用curl访问https示例分享

2014/01/17 PHP

php多维数组去掉重复值示例分享

2014/03/02 PHP

php使用递归计算文件夹大小

2014/12/24 PHP

PHP模块化安装教程

2016/06/01 PHP

PHP购物车类Cart.class.php定义与用法示例

2016/07/20 PHP

PHP使用curl_multi_select解决curl_multi网页假死问题的方法

2018/08/15 PHP

PHP实现随机发放扑克牌

2020/04/21 PHP

学习YUI.Ext基础第一天

2007/03/10 Javascript

用js脚本控制asp.net下treeview的NodeCheck的实现代码

2010/03/02 Javascript

理解Javascript_02_理解undefined和null

2010/10/11 Javascript

用原生js统计文本行数的简单示例

2016/08/19 Javascript

Vue路由跳转问题记录详解

2017/06/15 Javascript

详解vue.js移动端导航navigationbar的封装

2017/07/05 Javascript

AugularJS从入门到实践(必看篇)

2017/07/10 Javascript

Angular2之二级路由详解

2018/08/31 Javascript

在Vant的基础上封装下拉日期控件的代码示例

2018/12/05 Javascript

JavaScript 严格模式(use strict)用法实例分析

2020/03/04 Javascript

java直接调用python脚本的例子

2014/02/16 Python

python字典快速保存于读取的方法

2018/03/23 Python

Python实现随机生成手机号及正则验证手机号的方法

2018/04/25 Python

Django框架的中的setting.py文件说明详解

2018/10/15 Python

python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法

2019/07/11 Python

Python rabbitMQ如何实现生产消费者模式

2020/08/24 Python

5分钟快速掌握Python定时任务框架的实现

2021/01/26 Python

深入解析HTML5的IndexedDB索引数据库

2015/09/14 HTML / CSS

html5清空画布方法（三种）

2017/10/16 HTML / CSS

Brora官网：英国领先的羊绒服装品牌

2019/08/28 全球购物

前台接待的工作职责

2013/11/21 职场文书

二手房购房意向书范本

2014/04/01 职场文书

中文专业求职信

2014/06/20 职场文书

2014年组织委员工作总结

2014/12/01 职场文书

道士塔读书笔记

2015/06/30 职场文书

Python+Appium新手教程

2021/04/17 Python

redis内存空间效率问题的深入探究

2021/05/17 Redis

python 对图片进行简单的处理

2021/06/23 Python