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. Ubuntu 16.04桌面打开终端自动进去桌面文件夹

    sudo vim ~/.bashrc #在最后添加如下内容,注意,由于我的系统是中文版本,所以文件夹名称为“桌面”,如果为英文版的,那么需要更改为“Desktop” if [[ $PWD == $(r ...

  2. Linux系统备份还原工具3（使用Clonezilla/再生龙对硬盘进行镜像和克隆，类似于Ghost）

    说明:经过实验验证,再生龙主要是适合在本机还原原大小的分区,不适合将镜像备份还原到不同大小分区,期间可能有很多莫名奇妙的问题出现.硬盘对拷和PXE网刻这些没发现什么不好.如果要还原到别的电脑镜像制作时 ...

  3. 将mysql数据库数据导出为.sql文件

    打开Navicat ,在我们要到处的数据上面右击鼠标,然后弹出的快捷菜单上点击“转储SQL 文件”,在再次弹出的子菜单项中选择第一个“数据跟结构”.

  4. Java正则表达式过滤出字母、数字和中文

    原文:http://blog.csdn.net/k21325/article/details/54090066 1.Java中过滤出字母.数字和中文的正则表达式 (1)过滤出字母的正则表达式 [^(A ...

  5. 模拟用户点击弹出新页面不会被浏览器拦截_javascript技巧

    原文:http://www.html5cn.com.cn/article/zxzx/3195.html 相信用过window.open的小伙伴们都遇到过被浏览器拦截导致页面无法弹出的情况:我们换下思路 ...

  6. 配置-XX:+HeapDumpOnOutOfMemoryError 对于OOM错误自动输出dump文件

    配置-XX:+HeapDumpOnOutOfMemoryError 对于OOM错误自动输出dump文件 学习了:http://blog.csdn.net/stevendbaguo/article/de ...

  7. jQuery整理笔记七----几个经典表单应用

    1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...

  8. IDM百度云使用

    2018-8-6 (idm百度云速度很慢) Tips:如果感觉图片较小,可以ctrl+鼠标滚轮放大网页 首先下载IDM绿色版. 解压后:右键以管理员权限运行进行绿化 最后,它会在所有支持的浏览器上安装 ...

  9. C++进阶之虚函数表

    C++通过继承(inheritance)和虚函数(virtual function)来实现多态性.所谓多态,简单地说就是,将基类的指针或引用绑定到子类的实例,然后通过基类的指针或引用调用实际子类的成员 ...

  10. Jquery第四课 Javascript中this的使用方法

    thiskeyword的使用 在JavaScript中使用thiskeyword表示调用方法的对象,这与大部分面向对象语言是一样的.可是因为call.apply.bind等函数的影响.我们能够改变th ...