html 图片 透明颜色,CSS实现图片变灰色及透明度

【图片变灰】

每当遇到哀悼日，很多网站快速变灰色，来看看实现方式吧：

方式一，仅支持ie)

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

方式二，适合小页面，仅支持ie)

body {filter:gray}

方式三，仅支持ie与chrome)

html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}

方式四，支持所有浏览器)

window.οnlοad=function(){

grayscale(document.body);

}

推荐方式：方法三 > 方法四 > 方法一 > 方法二

推荐原因：方法三虽不支持firefox，但稳定，速度快，占用资源小！

【图片透明】

接下来，来说说图片透明，直接看代码：

filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.1;

说明：

第一个属性(filter)仅支持ie;

第二个属性(-moz-opacity)对firefox低版本支持

第三个属性(opacity)对firefox高版本支持

css控制图片变灰色，彩色

&lt ...

css 把图片变成灰色

3.14号刚下班,噩耗传来,伟大的物理学家斯蒂芬·威廉·霍金去世了. 同事正好叫我吃饭,几分钟内去看了一眼百度百科,一看也都变黑白了,可是查看图片还是彩色的,也是哪有这么快的时间来p图呢,回来搜了一下 ...

CSS使图片变灰

为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...

css 网站变灰色

网站变灰色 html{ -webkit-filter: grayscale(%); -webkit-filter: grayscale(); filter: grayscale(%); filter: ...

纯css实现图片或者页面变灰色

前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...

使用CSS将图片转换成黑白(灰色、置灰)z转

小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

js使用CSS将图片转换成黑白(灰色、置灰)

详细内容请点击 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的. 不过,时代发展,如今,CSS3的逐步推进,我们也开始 ...

IOS图片的两种处理：加阴影和变灰色

#import //图片阴影 UIImageView *img; [[img layer] setShadowOffset:CGSize ...

随机推荐

Sage CRM 平衡区域树结构

Sage CRM 的区域是把整数区间-214748364 ~02147483647划分为一个个相等的区间,使用数字的范围来表示区域的概念. 默认情况下,crm把区域划分为10

【转】部分电脑安装升级 ubuntu 12.04 后无法挂起问题的解决(挂起无法唤醒同样有效)