实例 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. pycharm常用的一些快捷键

    1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完成Ctrl + ...

  2. 唐雎(jū)不辱使命

    唐雎(jū)不辱使命 ​选自<战国策> 秦王使人谓安陵君曰:“寡人欲以五百里之地易安陵,安陵君其许寡人.”安陵君曰:“大王加惠,以大易小,甚善.虽然,受地于先生,愿终守之,弗敢易.”秦王不 ...

  3. Fragment 使用总结

    1. 要深刻理解Fragment 的生命周期 2. Fragment.getActivity()并不能保证非空. 3.如果在Fragment中有异步的回调, 特别要注意此时Fragment 是否还at ...

  4. android listview addheaderview viewpager

    just set viewPager's onTouchListener,like this: viewPager.setOnTouchListener(new OnTouchListener() { ...

  5. PAT甲题题解-1023. Have Fun with Numbers (20)-大数加法

    和1024一样都是大数据的题,因为位数最多要20位,long long最多19位给一个num,求sum=num+num问sum包含的数字,是否是num的一个排列,即数字都一样,只是顺序不同罢了. #i ...

  6. 20135234mqy-——信息安全系统设计基础第十三周学习总结

    第十一章 网络编程 11.1 客户端-服务器编程模型 基本操作:事务 当一个客户端需要服务时,向服务器发送一个请求,发起一个事务. 服务器收到请求后,解释它,并以适当的方式操作它的资源. 服务器给客户 ...

  7. 小组冲刺第十四天站立会议(Beta版发布)

    注: “助成”招聘网站链接:http://58.87.74.131:8080/zhucheng 欢迎大家进行评测. 一.任务看板: 二.燃尽图: 三.任务总结: 根据前期收集的用户反馈,再次对网站进行 ...

  8. python matploblib学习笔记

    import matplotlib.pyplot as pltimport numpy as np # matplotlib画图注释中文需要设置from matplotlib.font_manager ...

  9. 微信小程序input组件抖动及textarea组件光标错位解决方案

    问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...

  10. ELK 性能(3) — 在 Docker 上运行高性能容错的 Elasticsearch 集群

    ELK 性能(3) - 在 Docker 上运行高性能容错的 Elasticsearch 集群 介绍 在 Docker 上运行高性能容错的 Elasticsearch 集群 内容 通常熟悉的开发流程是 ...