opacity用来设置元素的透明度。

值被约束在[0.-1.0]范围内,如果超过了这个范围,其计算结果将截取到与之最相近的值。

0表示完全透明,1表示完全不透明。

浏览器支持:

(1).IE浏览器支持此属性。

(2).火狐李蓝旗支持此属性。

(3).谷歌浏览器支持此属性。

(4).opera浏览器支持此属性。

(5).safria浏览器支持此属性。

注意:IE6-IE8不支持此属性。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.ant{
width:200px;
height:100px;
background-color:#333;
opacity:0.4;
color:#ff0000;
}
</style>
</head>
<body>
<div class="ant">蚂蚁部落</div>
</body>
</html>

上面的代码实现了设置元素透明度的功能。

不过里面的文本也变得透明,这有时候不是我们希望看到的,具体可以参阅CSS 透明度设置一章节。

CSS3 opacity的更多相关文章

  1. CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

    转载,原文见:http://blog.csdn.net/freshlover/article/details/17143341 CSS3的透明度属性opacity想必大家都已经用的无处不在了.而对于不 ...

  2. python之路十五

    CSS position 属性 定义和用法position 属性规定元素的定位类型.说明这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身 ...

  3. css图片变色变暗变亮

    本文章向码农介绍css 图片变色变暗变亮 实例代码如下: <style> *{margin:0;padding:0;list-style:none;} img{border:1px sol ...

  4. 常用SASS封装

    结合Compass库和工作总结,列出了项目中最为常用的SASS片段.内容收集于网络,我进行了简单整理并测试正常,可以根据实际项目情况进行取舍,值得学习或直接应用,感谢! //重置浏览器默认样式@imp ...

  5. sass与compass实战(读书笔记)

    // compass create myproject // compass compile // compass compile --force 重新编译未改动的 // compass compil ...

  6. jQuery实现轮播效果(一) - 基础

    前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...

  7. Allenmind's Blog

    听说,Sass和Compass更配哟.来看看Compass的基本用法! 目录 Compass和Sass 安装Compass 项目初始化 编译 Compass的模块 Compass的Helper函数 一 ...

  8. 前端笔记--css样式笔记

    一.浮动 定位布局 1.浮动布局 left 元素向左浮动 right 元素向右浮动 例如:设置2个按钮,要使得按钮在同一行位置摆放,可以使用浮动,令按钮浮动到右边.注意,先设置float的按钮,例如: ...

  9. CSS3透明属性opacity

    例子: <div id="fixhovertree" style="position:fixed;left:100px;width:120px;top:100px; ...

随机推荐

  1. JDBC的结果集

    以下内容引用自http://wiki.jikexueyuan.com/project/jdbc/result-sets.html: SQL语句从数据库查询中获取数据,并将数据返回到结果集中.SELEC ...

  2. 保持WCF服务端与客户端的长连接

    背景 客户端与服务端使用WCF建立连接后:1.可能长时间不对话(调用服务操作):2.客户端的网络不稳定. 为服务端与客户端两边都写“心跳检测”代码?不愿意. 解决 设置inactivityTimeou ...

  3. neutron trouble shooting - ip can not ping

    neutron创建了一个router后,显示列表如下: [root@controller01 keystone]# neutron router-port-list router +--------- ...

  4. 使用Tornado实现http代理

    0x00 http代理 http代理的用处非常多,市面上也有公开的代理,可是有时候为了工作须要,比方分析应用层流量.做数据訪问控制.甚至做监控等等.Tornado提供了一些非常方便的环境和API,我们 ...

  5. CentOS 6.9正式版下载

      2017-04-07 ,CentOS 6.9正式发布,带来了诸多改进,具体如下. CentOS 6.9重大改进: — 不再有LiveCD,用户可将LiveDVD复制到USB key,在需要时使用: ...

  6. day2-搭建hdfs分布式集群

    1.搭建hdfs分布式集群 4.1 hdfs集群组成结构: 4.2 安装hdfs集群的具体步骤: 一.首先需要准备N台linux服务器 学习阶段,用虚拟机即可! 先准备4台虚拟机:1个namenode ...

  7. HDU 5319 Painter(枚举)

    Painter Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Su ...

  8. Android如何进行单元测试

    Menifest.xml中加入: <application>中加入: <uses-library android:name="android.test.runner&quo ...

  9. UILongPressGestureRecognizer 运行两次的解决的方法

    近期维护之前用iOS SDK 3.2写过的3年多前的map方面的模块,在地图上长按pin,发觉一个点莫名奇异点插了两个pin. 查了一下,原来是如今的sdk要在UILongPressGestureRe ...

  10. NinePatchChunk.java分析

    最近在Swing中使用.9图片,用到了NinePatchChunk.java文件,但是发现有时会出现无法完美展示的情况,决定修复一下这个问题,顺便研究一些.9的绘制过程 通过分析发现draw函数先是计 ...