在图片的属性中加上{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. HTML当中特殊字符的表示

    (回车换行) <br> (空格符)   &(AND符号) & <(左尖括号.小于号) < >(右尖括号.大于号) > °(度) ° •(间隔符) • ...

  2. 常用Oracle函数记录

    1. Oracle的replace函数与translate函数 replace函数是在字符串级别的代替,对应字符串一一替换 SQL> SELECT REPLACE('accd','cd','ef ...

  3. 浅谈WebLogic和Tomcat

    J2ee开发主要是浏览器和服务器进行交互的一种结构.逻辑都是在后台进行处理,然后再把结果传输回给浏览器.可以看出服务器在这种架构是非常重要的. 这几天接触到两种Java的web服务器,做项目用的Tom ...

  4. # 20145205《Java程序设计》第2周学习总结

    教材学习内容总结 本章的学习内容主要是关于变量,在java编写中各个不同的变量定义,关于数字,根据范围不同所分的 -128~127的byte -32768~32767的short -214748364 ...

  5. 浅析Java中CountDownLatch用法

    http://www.cnblogs.com/yezhenhan/archive/2012/01/07/2315652.html

  6. sql server 存储过程 以及java如何使用存储过程

    Sql 语句 有一个test_table1表  他有两个字段  ID 和name proc是procedure的缩写 也就是存储过程,StuProc2为创建的存储过程名称 执行以下创建存储后会在Sql ...

  7. 轻量级ORM-Fluentdata入门

    Fluent Data 入门 由 Primates 根据互联网资源整理FluentData 是微型 ORM(micro-ORM)家族的一名新成员,旨在比大型 ORM(full ORM)更加易用.Flu ...

  8. iOS 导航栏返回的相关跳转

    导航条跳转页面的考虑 对于用navigationcontroller来跳转页面的时候,其实是执行堆栈的进栈和出栈的操作,要想释放内存,那么在来回跳转的时候,就要考虑几个问题了 1 A =>B=& ...

  9. CentOS 系统目录解析

    CentOS 系统目录解析 http://mp.weixin.qq.com/s?__biz=MzAxOTAzMzEzNg==&mid=202463614&idx=2&sn=51 ...

  10. 使用intellij的svn时提示出错: Can't use Subversion command line client: svn.Errors found while svn working copies detection.

    使用Intellij的svn时提示出错:Can't use Subversion command line client: svn. Errors found while svn working co ...