滤镜 filter：gray 变灰色

.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray;
}

时间： 2024-10-12 03:22:33

滤镜 filter：gray 变灰色的相关文章

CSS设定图片变灰色

在最近工作中,开发过程中需要设定一个图片变为灰色,刚开始我以为是更换图片,可是做了一段时间发现CSS就可以设定图片颜色变回灰色.具体的代码如下: 图片如下: 具体的实现由两种方法:一个是CSS3的滤镜功能.具体代码如下: <span style="font-size:18px;">.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%)

实现类似QQ离线用户头像彩色变灰色的效果

头像由彩色变灰色有两种实现方式: 方法1把图片彩色图转换为纯黑白二色: /** * 将彩色图转换为纯黑白二色 * * @param 位图 * @return 返回转换好的位图 */ private Bitmap convertToBlackWhite(Bitmap bmp) { int width = bmp.getWidth(); // 获取位图的宽 int height = bmp.getHeight(); // 获取位图的高 int[] pixels = new int[width * h

让网页图片变灰色的三种方法

我一直喜欢灰度图像因为我认为他们看起来更有艺术感.很多图片编辑如Photoshop很容易把你的彩色图像变成灰度.甚至有选择调整颜色深度和色调.不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异. 1.CSS Filter 使用CSS过滤器属性可能是最简单的方法把图像变成灰度.以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度. 现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox.Chrome和Safari.以前,我们也提到Webkit过滤器,它不

网页图片变灰色的三种实现办法

1.CSS Filter 使用CSS过滤器属性可能是最简单的方法把图像变成灰度.以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度. 现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox.Chrome和Safari.以前,我们也提到Webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果. 添加如下CSS样式可以将图像变成灰色 img { -webkit-filter: grayscale(1);/* Webkit */ filter:gray;/

兼容ie8 rgba()用法滤镜filter的用法

原文 http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到ie8.这个就有点蛋疼了.因为ie8不支持rgba()函数.下面我们总结一下rgba()函数的含义. rgba的含义,r代表red,g代表green,b代表blue,红绿蓝

C#中Winform窗体Form的关闭按钮变灰色的方法

本文实例讲述了C#中Winform窗体Form的关闭按钮变灰色的方法,对C#程序设计有一定的借鉴价值,分享给大家供大家参考之用.具体方法如下: 主要功能代码如下: [ DllImport ( "USER32.DLL" ) ] public static extern int GetSystemMenu(int hwnd, int bRevert); [ DllImport ( "USER32.DLL" ) ] public static extern int Rem

div+css实现简单的弹出窗（背景变灰色）

自己做了一个网站,需要用到弹出框的功能,以前没做过这个,就去网上查了下资料,然后试着写了一个最简单的弹出框效果. 需求:点击弹出框按钮,在原页面基础上弹出一个弹出框,并且背景要变成灰色,原页面不能被编辑知道关闭弹出框. 原理:在原页面的基础上添加两个div,一个是弹出框,一个是弹出框后面的背景层(页面变灰).首先这两个div是跟原页面的代码在一起存放的,只不过使用了display:none这个css属性先将其隐藏不显示,在触发弹出框效果时再使用display:block让这两个div显示出来即可

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

转载,原文见:http://blog.csdn.net/freshlover/article/details/17143341 CSS3的透明度属性opacity想必大家都已经用的无处不在了.而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,这个估计谁都会写,但是涉及到filter的具体语法含义和各版本写法的不同区别,很多人都搞不准确,我曾经问过许多群里的大牛,说的都不是很准确,网上的说法就更五花八门了.今天呢,主要是重新温习一下这个属性,并实际测试来说明正确的写法,和IE各版

HTML5----CSS3图片滤镜(filter)特效

支持Chrome: 暂不支持浏览器:FF,IE... 希望后者努力效果图: CSS: <style type="text/css"> @-webkit-keyframes testAnim { 0% {-webkit-filter: grayscale(0.5) blur(1px) saturate(2);} 100% {-webkit-filter: grayscale(0.2) blur(6px) saturate(9);} } /*IE,FF暂不支持*/ @-moz