实例 1 - 创建透明图像

定义透明效果的 CSS3 属性是 opacity。

首先,我们将展示如何通过 CSS 来创建透明图像。

常规图像:

带有透明度的相同图像:

请看下面的 CSS:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。

另外:鼠标悬停图片改变透明度设置

img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}

opacity设定图片透明度的更多相关文章

  1. Opacity多浏览器透明度兼容处理

    用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...

  2. 解决IE6下png图片透明度不显示的问题

    世界上最遥远的距离,不外乎我在搞前端,你却在用旧IE,现在随着XP要退休了,IE6的市场占有率应该也会逐步下滑.不过基于天朝人民的惰性以及企鹅微软的“扎篱笆”活动,做网站的朋友依旧不能忽视IE6的存在 ...

  3. CSS 之 Opacity多浏览器透明度兼容处理

    用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...

  4. Opacity多浏览器透明度兼容处理(转)

    用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...

  5. CSS鼠标点击式变化图片透明度

    今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...

  6. TCPDF 背景图片透明度

    1.TCPDF 背景图片透明度  参考:https://bbs.csdn.net/topics/392364981 效果: 2.画一条线: 2.1方法解说  /*画一条线: x1:线条起点x坐标 y1 ...

  7. 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. IE8下jQuery改变png图片透明度时出现的黑边问题

    png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以 ...

  9. iOS开发-UISlider改变图片透明度

    拖动条是通过滑块的位置来标识数值,而且拖动条允许用户拖动滑块来改变值.因此,拖动条通常用于对系统的某种数值进行调节,如调节亮度,透明度,音量等. 一.属性介绍 @property(nonatomic) ...

随机推荐

  1. 20135323符运锦----第三周:构建一个简单的Linux系统MenuOS

    相关知识点 1.arch目录 占据相当庞大的空间,X86目录下代码需要重点关注. 2.init目录 内核启动的相关代码基本都在此目录下,内含MAIN.C,文件中START_KERNEL是整个LINUX ...

  2. Java单元测试框架 JUnit

    Java单元测试框架 JUnit JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于KentBeck的sUnit的xUnit家族中为最成功的一 ...

  3. Data Plane

    2015-2018,部分关于SDN数据平面的故障恢复文献粗读 SHEAR: A highly available and flexible network architecture marrying ...

  4. Web网络服务介绍

    Web网络服务也叫WWW(World Wide Web),一般是指能够让用户通过浏览器访问到互联网中文档资源服务.目前提供WEB网络服务的程序有Apache .Nginx 和  IIS  等等,Web ...

  5. BroadcastReceiver介绍

    参考资料 : 基础总结篇之五:BroadcastReceiver应用详解 BroadcastReceiver用于接收广播信息,可以通过sendBroadcast等方法进行发送.sendBroadcas ...

  6. Python学习--------------Atm+购物车系统

    一.程序需求 模拟实现一个ATM + 购物商城程序: 1.额度 15000或自定义 2.实现购物商城,买东西加入 购物车,调用信用卡接口结账 3.可以提现,手续费5% 4.每月22号出账单,每月10号 ...

  7. [LOJ6436][PKUSC2018]神仙的游戏

    loj description 给你一个只有01和?的字符串,问你是否存在一种把?改成01的方案使串存在一个长度为\(1-n\)的\(border\).\(n\le5\times10^5\) sol ...

  8. 【bzoj2754】 SCOI2012—喵星球上的点名

    http://www.lydsy.com/JudgeOnline/problem.php?id=2754 (题目链接) 题意 给出$n$个名字串,$m$个点名串,问对于每一个姓名串,它包含多少个点名串 ...

  9. Atcoder Grand 012 C - Tautonym Puzzle

    题意: 构造一个字符串,使得这个字符串有只有n个形如AA这样的子序列. 神TM构造题不会做,, 我们构造一个长度为2*m的字符串,前m个是一个1-m的排列,后m个就是按顺序1-m. 这样这个串里符合要 ...

  10. 51nod 1450 闯关游戏

    首先肯定要先把所有的关卡打通后去找两星几率最大的关卡刷星(论打游戏经验的重要性). 所以从两星几率小的关打起,记录当前拿到x个星星的几率和当前走过的期望步数,如果发现剩下的关必须全两星,就直接计算答案 ...