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. C# 图片识别（支持21种语言）转

    来自:http://www.cnblogs.com/stone_w/archive/2011/10/08/2202397.html 图片识别的技术到几天已经很成熟了,只是相关的资料很少,为了方便在此汇 ...

  2. 请问这个「 (?<=<(\w+)>).*(?=<\/\1>) 」正则表达式是什么意思呢？

    问题:https://www.zhihu.com/question/26480812  (?<=<(\w+)>).*(?=<\/\1>) ---------------- ...

  3. 015 WAN

    Router#config t Enter configuration commands, one per line.  End with CNTL/Z. Router(config)#int s0/ ...

  4. Guass列主元、平方根法、追赶法求解方程组的C++实现

    一,要解决的问题 选用合适的算法,求解三种线性方程组:一般线性方程组,对称正定方程组,三对角线性方程组. 方程略. 二,数值方法 1,使用Guass列主元消去法求解一般线性方程组. Guass列主元是 ...

  5. 面试题之strcpy/strlen/strcat/strcmp的实现

    阿里的电面要我用C/C++实现一个字符串拷贝的函数,虽然以前写过 strcpy 的函数实现,但时间过去很久了,再加上有点紧张,突然就措手不及了.最后写是写出来了,但没考虑异常的情况,面试官好像很不满意 ...

  6. 网上Unused Index Script 脚本的问题

    曾经使用过网上下载的脚本查询没有使用过的Index比方SQL SERVER – 2008 – Unused Index Script – Download,事实上如今看起来这个脚本是有一些问题. 脚本 ...

  7. [Python] How to unpack and pack collection in Python?

    It  is a pity that i can not add the video here. As a result, i offer the link as below: How to unpa ...

  8. ArcGIS中生成蜂窝多边形算法解析

    近来有不少同学.都有问我关于蜂窝多边形的问题.也就是正六边形,也就是以下这个东东: 一般的问答模式例如以下: 亲们问:ArcGIS里面那个工具能够做这个东东? 虾神答:额,没有原生的工具. 亲们问:那 ...

  9. clojure学习记录

    take 从列表中获取子列表 into a b  把b conj 到a中 (defn count-a-seq [lat]  (reduce (fn [x y] (+ x 1)) 0 lat)) red ...

  10. 【Codeforces】Round #376 (Div. 2)

    http://codeforces.com/contest/731 不发题面了,自己点链接 总结一下 考场上 原以为这次要加很多raiting... 但FST狗记邓,只加了58rating 总结一下 ...