在图片的属性中加上{filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}

 
opacity是最重要的,因为它是CSS透明的标准属性,取值范围在0-1之间,目前支持的浏览器有:
Firefox、Chrome、Opera、Safari。(也就是说,除了IE,它支持所有主流浏览器);
filter:alpha(opacity=50);是专门给IE设定的属性,取值的范围在0-100之间;
-moz-opacity是为了兼容一些老版本的Mozilla浏览器,取值范围在0-1之间;
-khtml-opacity是为了兼容一些老版本的Safari浏览器,取值范围在0-1之间。
看别人的代码,通常情况下会剩去后两个属性,这是因为Mozilla和Safari浏览器都支持自动更新
,用这些浏览器的人一般用的也是较新的版本,因此后两个为了兼容较老的浏览器的属性不用也
罢。
以上就是CSS透明属性的基本用法,然而用到透明属性的地方,一般都是用在层叠层次较多的下层
来用,这就需要考虑CSS的继承问题:因为下层透明的元素,上层也会跟着透明。目前我还没有很
好的方法解决这个继承问题(有更好解决办法的欢迎留言告之),所以遇到这种情况,我通常是
把HTML部分要透明的部分独立分离开,然后采用定位的方法再把它定位到该放置的位置。

css设置图片的透明度的更多相关文章

  1. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  2. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  3. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  4. css设置图片水平及垂直居中

    .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:cen ...

  5. css样式设置图片半透明度,兼容IE8,火狐

    关于背景颜色透明的兼容浏览器的问题,一直是个问题,我所写的兼容IE8,和火狐,说是兼容所有浏览器我就没有测试,有兴趣的朋友可以自己测试下吧. background-color:white;filter ...

  6. 关于HTML+CSS设置图片居中的方法

    有的时候我们会遇到这样一个问题,就是当我们按下F12进行使用firebug调试的时候,我们发现图像没有居中,页面底下有横向的滑动条出现,图片没能够居中,默认状态下只是紧靠在页面最左侧,而我们对图像缩小 ...

  7. css设置元素背景透明度的2种方式

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年7月9日. 设置元素的背景的透明度可以使用2种方式:方式1:opacity属性.方式2:使用rgba值.两种方式有一点差异,opaci ...

  8. css设置图片百分比显示,最简洁的代码

    css代码: .img-box { padding-bottom: 100%; } .img-box img { position: absolute; top:; bottom:; left:; r ...

  9. css设置图片根据最大边自适应

    给新手的福利,还是记一下吧.......很简单 <div> <img src="1.jpg" alt=""> </div> ...

随机推荐

  1. 基于socket的TCP和UDP编程

    一.概述 TCP(传输控制协议)和UDP(用户数据报协议是网络体系结构TCP/IP模型中传输层一层中的两个不同的通信协议. TCP:传输控制协议,一种面向连接的协议,给用户进程提供可靠的全双工的字节流 ...

  2. jquery.UI.tabs

    今天对jquery UI的tabs进行了进一步的了解,目的是想把死板的切换效果变得动感点,不过经过这进一步的了解,发现它并不合适或都说并不能实现我想要的效果,我想要的效果就是类似淘宝商城的banner ...

  3. macos开发pgsql数据库

    mac安装Postgresql作为数据库 最简单的方式是安装Postgres.App. 这个应用里自带了最新版本的PostgreSQL而且不需要学习数据库服务器启动和关闭的命令.程序安好后(别忘了拖拽 ...

  4. 简单查询(select)

      在数据库中,字符串进行运算时,会将字符串内容转化为数字进行运算 查询语法:select 列     from 表     where 条件     order by 排序     asc:升序   ...

  5. jQuery系列:五个模块总结

    Query插件,以备并希望在前端方面有所长进.请批评指正. 一,类型判断全解 JQuery判断类型扩展方法:$.type() /*type: function( obj ) { if ( obj == ...

  6. mysql索引的一些知识

    一.MySQL索引类型 mysql里目前只支持4种索引分别是:full-text,b-tree,hash,r-tree b-tree索引应该是mysql里最广泛的索引的了,除了archive基本所有的 ...

  7. Unity透明材质Batch

    NO Batch  ? 游戏场景中存在大量例子的时候,DrallCall的压力很大,但是遍历一遍之后发现,为啥一样的粒子特效竟然没有合并,why?经过很多测试后发现,如果把透明材质的修改为非半透明的, ...

  8. ruby 随笔

    1.A Server is running获取PID lsof -wni tcp:3000关闭PID kill -9 pID2.rubymine注册码http://idea.lanyus.com/ 3 ...

  9. 使用git@osc管理现有项目

    首先安装git和powershell集成git工具 参考 http://www.cnblogs.com/kreo/p/4685988.html 打开windows powershell,进入项目目录, ...

  10. laravel的门面模式

    核心技术是__callStatic()方法,当调用的方法不存在时,会自动调用魔术方法__callStatic()方法,和__autoload()方法同工异曲.