实例 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. Theory And Practice

    实践出真知,建议不要一味地看Backbone源码和网上解析,自己动手实践吧少年们! 我是一个简单的简直无可救药的小栗子~ ——Silun Wang 我的几个小问题: 1. Rocket介绍没有Todo ...

  2. Leetcode题库——40.组合总和II

    @author: ZZQ @software: PyCharm @file: combinationSum2.py @time: 2018/11/15 18:38 要求:给定一个数组 candidat ...

  3. 团队作业5——英语学习/词典App行业Top5

    来自权威研究机构易观智库的最新数据表明,国内几家主流词典类App市场的份额占比差异化分布进一步加剧. 对于156万安卓移动端活跃数字消费者的移动互联网行为监测结果显示,截至2014年8月底,有道词典A ...

  4. spring mvc自定义注解--访问时验证

    作用:在访问controller的方法时,判断用户是否是登陆状态. step1:定义注解 import java.lang.annotation.ElementType; import java.la ...

  5. appearance格式化表单元素的边框,在chrome和FF下鼠标点击时会多出一个蓝色边框

    可在元素上添加样式 -webkit-appearance: none; -moz-appearance:none;outline:none; 清除掉元素所有的外貌,以便自定义风格

  6. 圆桌的项目Alpha冲刺——测试

    测试工作安排 作为一个测试计划来讲,核心的三个要素是时间,资源,范围.时间就是什么时候做以及要花多久做,资源就是你要调用的人力.机器等资源,范围是你要测试的东西以及测试重点. 时间:每天完成相应的模块 ...

  7. psp进度统计

    每周例行报告 本周PSP 类别 任务 开始时间 结束时间 被打断时间 总计工作时间    11月8日 代码 参与团队项目 10:13 11:30 0 77min 写博客 词频统计总结 13:35 14 ...

  8. Linux下搭建testlink1.9.17

    如果只是要搭建testlink服务的话,建议使用testlink的集成安装包,能避免很多坑 下载地址:https://bitnami.com/stack/testlink/installer 下载好后 ...

  9. PostgreSQL之oracle_fdw安装与使用

    目的介绍 现在项目开发遇到一个问题,就是需要从PostgreSQL中访问Oracle数据库 身为渣渣猿一脸懵逼.于是乎请教了公司的数据库方面的大牛韩工.告诉我用oracle_fdw 可以实现,但是在实 ...

  10. 【题解】 bzoj2460: [BeiJing2011]元素 (线性基)

    bzoj2460,戳我戳我 Solution: 线性基板子,没啥好说的,注意long long 就好了 Code: //It is coded by Ning_Mew on 5.29 #include ...