编程 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编写的的精美动画进度条(无flash/无图像/无脚本/附源码)

Jan 07 HTML / CSS

详解css position 5种不同的值的用法

Jul 30 HTML / CSS

CSS3实现缺角矩形，折角矩形以及缺角边框

Dec 20 HTML / CSS

解决img标签上下出现间隙的方法

Dec 14 HTML / CSS

使用HTML5 Canvas绘制直线或折线等线条的方法讲解

Mar 14 HTML / CSS

html5 touch事件实现页面上下滑动效果【附代码】

Mar 10 HTML / CSS

HTML5中FileReader接口使用方法实例详解

Aug 26 HTML / CSS

HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

Jan 30 HTML / CSS

IE10 Error.stack 让脚本调试更加方便快捷

Apr 22 HTML / CSS

HTML5微信播放全屏问题的解决方法

Mar 09 HTML / CSS

html5 canvas的绘制文本自动换行的示例代码

Sep 17 HTML / CSS

HTML5触摸事件(touchstart、touchmove和touchend)的实现

May 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

对比分析php中Cookie与Session的异同

2016/02/19 PHP

PHP使用内置函数生成图片的方法详解

2016/05/09 PHP

IE下写xml文件的两种方式(fso/saveAs)

2013/08/05 Javascript

javascript实现json页面分页实例代码

2014/02/20 Javascript

jQuery实现横向带缓冲的水平运动效果(附demo源码下载)

2016/01/29 Javascript

javascript实现下雪效果【实例代码】

2016/05/03 Javascript

JS清除字符串中重复值的实现方法

2016/08/03 Javascript

JavaScript基于自定义函数判断变量类型的实现方法

2016/11/23 Javascript

JS常见疑难点分析之match，charAt，charCodeAt，map，search用法分析

2016/12/25 Javascript

使用node.js搭建服务器

2017/05/20 Javascript

node.js博客项目开发手记

2018/03/16 Javascript

微信小程序上传图片功能（附后端代码）

2020/06/19 Javascript

Vue中在新窗口打开页面及Vue-router的使用

2018/06/13 Javascript

微信小程序内拖动图片实现移动、放大、旋转的方法

2018/09/04 Javascript

React和Vue中监听变量变化的方法

2018/11/14 Javascript

vue或react项目生产环境去掉console.log的操作

2020/09/02 Javascript

Python按行读取文件的实现方法【小文件和大文件读取】

2016/09/19 Python

Python探索之爬取电商售卖信息代码示例

2017/10/27 Python

Python实现二维数组输出为图片

2018/04/03 Python

python生成ppt的方法

2018/06/07 Python

Python中的groupby分组功能的实例代码

2018/07/11 Python

Python全局变量与局部变量区别及用法分析

2018/09/03 Python

Python多线程编程之多线程加锁操作示例

2018/09/06 Python

python dict 相同key 合并value的实例

2019/01/21 Python

浅谈Scrapy网络爬虫框架的工作原理和数据采集

2019/02/07 Python

用Python配平化学方程式的方法

2019/07/20 Python

基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)

2019/08/06 Python

浅谈对pytroch中torch.autograd.backward的思考

2019/12/27 Python

新加坡网上美容店：Hermo新加坡

2019/06/19 全球购物

金智子午JAVA面试题

2015/09/04 面试题

商务英语大学生职业生涯规划书范文

2014/01/01 职场文书

体育专业自荐书

2014/05/29 职场文书

大学生实习证明范本

2014/09/19 职场文书

2014年银行个人工作总结

2014/12/05 职场文书

物业工程部经理岗位职责

2015/04/09 职场文书

2015年电话客服工作总结

2015/05/18 职场文书