在图片的属性中加上{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. CF #374 (Div. 2) D. 贪心,优先队列或set

    1.CF #374 (Div. 2)   D. Maxim and Array 2.总结:按绝对值最小贪心下去即可 3.题意:对n个数进行+x或-x的k次操作,要使操作之后的n个数乘积最小. (1)优 ...

  2. 封装ajax

    function ajaxRequest(method,url,sync,param,responseFun){ //创建对象 var httpRequest; if(window.XMLHttpRe ...

  3. ANSI_NULLS和QUOTED_IDENTIFIER

    这些是 SQL-92 设置语句,使 SQL Server 2000/2005 遵从 SQL-92 规则. 当 SET QUOTED_IDENTIFIER 为 ON 时,标识符可以由双引号分隔,而文字必 ...

  4. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  5. <meta>指定浏览器模式(browser mode)或文档模式(document mode)无效

    这是前两天解决的一个故障,准确的说它不是一个SharePoint的问题,而是IE8浏览器或者说是HTML代码的问题,但我感觉还是挺有意思的,所以贴上来分享一下. 基础知识 简单的讲,就是IE浏览器中有 ...

  6. extjs后自己写了一些见不得人的脚本

    <html> <head> <title> 配置管理器 </title> <style type="text/css"> ...

  7. myBatis的一对多查询,主要利用resultMap实现一次查询多个结果集

    日常开发中有这中场景,一个用户有多个角色,一个角色又有多个菜单,想查出一个用户的所有菜单.除了常见的关联查询之外,更使用的应该是利用myBatis的resultMap来实现一次查询出多个结果集,缺点: ...

  8. Ubuntu 设置当前用户sudo免密码

    方法1 # 备份 /etc/sudoers sudo cp /etc/sudoers . #打开 /etc/sudoers sudo visudo # 在文件末尾加入 kube ALL=NOPASSW ...

  9. ExtJS笔记 Field

    Fields are used to define what a Model is. They aren't instantiated directly - instead, when we crea ...

  10. 掌握Thinkphp3.2.0----内置标签

    使用内置标签的时候,一定要注意闭合-----单标签自闭合,双标签对应闭合 标签的学习在于记忆和应用 一. 判断比较 //IF 语句的完整格式 <if condition="$user ...