在图片的属性中加上{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. bzoj4196 [Noi2015]软件包管理器 树链剖分+线段树

    先把树剖分了(又是dfs1.dfs2),然后区间求和.区间覆盖即可 难得的1A好(shui)题 ——写了那么多题,终于有一道是1A的了,加上上一次连续交了几遍A的程序,我的状态莫名好看啊233 总结: ...

  2. easyUI-增删改查

    页面整体效果 首先是页面层: 因为数据中涉及到Date类型的字段,所以在一开始先做了一个拼装装换日期格式的方法 因为在easyUI的JSON解析的Data是一个long型的数字长串,关于解析的数字长串 ...

  3. CI框架3

    1.CI不能像smarty那样直接{}访问,  <?php echo $ci;?> application\config\ config.php 日志查看      $config['lo ...

  4. python实现之决策树

    一.Predict survival on the Titanic 使用泰坦尼克号上的乘客数据,对乘客是否存活进行预测 1.观察数据集合 可能遇到的问题 训练集和测试集特征值得属性并不重合.连续属性和 ...

  5. JS字符串格式化函数 string.format

    原生JS写的仿C#的字符串format函数,在此基础上又增加了便于JS使用的字面量对象参数. 参照C#中的规则,调用的时候会检测字符串格式,如果字符串格式不规范,或者传入的参数为null或undefi ...

  6. scala中的集合框架

  7. LightOj 1298 - One Theorem, One Year(DP + 欧拉)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1298 题意:给你两个数 n, p,表示一个数是由前 k 个素数组成的,共有 n 个素数 ...

  8. 如何消除MyEclipse导入jQuery库后出现的错误标记

    由于MyEclipse提供比较严谨的js校验功能,因此jQuery等前端框架导入到MyEclipse后均会提示错误,比较难看,如果要将校验去掉可以遵循下面步骤:1.点击菜单“MyEclipse”-&g ...

  9. HTML初级入门内容

    常用属性: Width=宽度 Height=高度 Size=大小 Color=颜色 Align=布局方向,值包括(top,bottom,left,right,center)上,下,左,右,中. Bor ...

  10. LeetCode Plus One Linked List

    原题链接在这里:https://leetcode.com/problems/plus-one-linked-list/ 题目: Given a non-negative number represen ...