在图片的属性中加上{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. VS使用的一些备忘东西

    1.VSc++代码快速对齐格式化,VC内置了一个将代码按标准风格对齐的命令:ALT+F8 (需全选对齐内容)

  2. HUAS_ACM 个人训练#2 C

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=117538#problem/C 题目大意:给出一个字符串,然后给出一系列的x,y ...

  3. plist文件里的"Bundle versions string, short" 跟 "Bundle version" 的区别及作用

    Bundle versions string, short:用于itunes上显示的版本号,即对外的版本,一般除了版本迭代外,不能随意更改. Bundle version:内部项目管理的版本号,是给程 ...

  4. C#操作XML的方法

    添加命名空间: using System.Xml; 1,先创建一个BookModel类 using System; using System.Collections.Generic; using Sy ...

  5. Jvascript简介

    一.Javascript就是我们所说的脚本语言.它不同于C++/java等语言,它更加灵活! 正因为其灵活性,没有那么多的规章制度,也是我们容易学的地方,但很多时候也是 令人无奈的地方! 二.我们要知 ...

  6. ionic 踩过的坑

    内联模板 : script可能你没有注意过,HTML中常用的script标签在AngularJS中被重新定义了: 除了原来的脚本声明功能之外,如果script元素的type属性 定义为text/ng- ...

  7. springboot+solr

    整合完DB层,cache层,开始整合solr. 注入SolrClient, package hello.configuration; import java.net.MalformedURLExcep ...

  8. angular路由 模块 依赖注入

    1.模块 var helloModule=angular.module('helloAngular',[]); helloModule.controller('helloNgCrtl',['$scop ...

  9. Quartz2之入门示例【转】

    原文地址:http://liuzidong.iteye.com/blog/1118992 环境:XP+Myeclipse6.5+JDK1.6 quartz官网:http://www.quartz-sc ...

  10. 基于apache的tomcat负载均衡和集群配置session共享

    接上面的话题接着继续完善.为什么没接到上篇呢?原因很简单太长的文章不爱看!就像有人写了上千行的方法一样,不是逼得没办法谁爱看谁看,反正我不看. 期间我没有一次配置成功,从失败的开始说起, 1.准备ja ...