编程 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的CSS 多栏(Multi-column)实现瀑布流源码分享

Jun 11 HTML / CSS

CSS3中的常用选择器使用示例整理

Jun 13 HTML / CSS

CSS3的column-fill属性对齐列内容高度的用法详解

Jul 01 HTML / CSS

CSS3模拟动画下拉菜单效果

Apr 12 HTML / CSS

浅谈CSS3特性查询（Feature Query: @supports）功能简介

Jul 31 HTML / CSS

CSS3 实现雷达扫描图的示例代码

Sep 21 HTML / CSS

CSS3实现的渐变幻灯片效果

Dec 07 HTML / CSS

HTML5移动端开发遇见的东西

Oct 11 HTML / CSS

html5中为audio标签增加停止按钮动作实现方法

Jan 04 HTML / CSS

HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

May 08 HTML / CSS

HTML5无刷新改变当前url的代码

Mar 15 HTML / CSS

webView加载html图片遇到的问题解决

Oct 08 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

espresso double下咖啡粉超细时饼压力对咖啡的影响

2021/03/03 冲泡冲煮

初学者入门：细述PHP4的核心Zend

2006/09/05 PHP

php 获取可变函数参数的函数

2009/08/26 PHP

PHP高自定义性安全验证码代码

2011/11/27 PHP

smarty中常用方法实例总结

2015/08/07 PHP

[原创]php实现 data url的图片生成与保存

2016/12/04 PHP

web的各种前端打印方法之jquery打印插件jqprint实现网页打印

2013/01/09 Javascript

JavaScript根据数据生成百分比图和柱状图的实例代码

2013/07/14 Javascript

js借助ActiveXObject实现创建文件

2013/09/29 Javascript

javascript删除数组元素并且数组长度减小的简单实例

2014/02/14 Javascript

jQuery实现菜单式图片滑动切换

2015/03/14 Javascript

Bootstrap页面布局基础知识全面解析

2016/06/13 Javascript

利用Node.js+Koa框架实现前后端交互的方法

2017/02/27 Javascript

angular使用post、get向后台传参的问题实例

2017/05/27 Javascript

vue如何使用 Slot 分发内容实例详解

2017/09/05 Javascript

jQuery中图片展示插件highslide.js的简单dom

2018/04/22 jQuery

JS 使用 window对象的print方法实现分页打印功能

2018/05/16 Javascript

vue中倒计时组件的实例代码

2018/07/06 Javascript

小程序ios音频播放没声音问题的解决

2018/07/11 Javascript

js实现数字从零慢慢增加到指定数字示例

2019/11/07 Javascript

使用Python微信库itchat获得好友和群组已撤回的消息

2018/06/24 Python

详解Python发送email的三种方式

2018/10/18 Python

Python实现E-Mail收集插件实例教程

2019/02/06 Python

Django高级编程之自定义Field实现多语言

2019/07/02 Python

Django文件存储自己定制存储系统解析

2019/08/02 Python

Python类如何定义私有变量

2020/02/03 Python

宝塔面板成功部署Django项目流程(图文)

2020/06/22 Python

奥地利体育网上商店：Gigasport

2019/10/09 全球购物

大学校庆邀请函

2014/01/11 职场文书

化工专业大学生职业生涯规划书

2014/01/14 职场文书

电台实习生求职信

2014/02/25 职场文书

机关搬迁方案

2014/05/18 职场文书

党员领导干部承诺书

2014/05/28 职场文书

自主招生学校推荐信

2014/09/26 职场文书

小学远程教育工作总结

2015/08/13 职场文书

交通安全宣传标语（100条）

2019/08/22 职场文书