CSS3 grayscale滤镜图片变黑白

1. 使整个页面的图片都变成灰色的，代码如下。

html{
    font-size: 100%;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\‘http://www.w3.org/2000/svg\‘><filter id=\‘grayscale\‘><feColorMatrix type=\‘matrix\‘ values=\‘0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\‘/></filter></svg>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);
}

2. 如果只需要某些图片变成灰色的，引用类名即可。例如：

.gray{
    font-size: 100%;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
  
 filter: url("data:image/svg+xml;utf8,<svg
xmlns=\‘http://www.w3.org/2000/svg\‘><filter
id=\‘grayscale\‘><feColorMatrix type=\‘matrix\‘ values=\‘0.3333
0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0
1 0\‘/></filter></svg>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);
}

时间： 2024-10-17 04:52:18

CSS3 grayscale滤镜图片变黑白的相关文章

CSS3 grayscale滤镜图片变黑白实例页面

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

致敬英雄，共悼逝者，css 让页面变黑白

壹 ? 引 今天是四月四日清明节,也是全国哀悼抗疫烈士的一天.细心的同学可以发现,不仅是娱乐活动以及游戏全部停止,当我们打开各大门户网站,网站页面也都变成了黑白,那么具体怎么做呢,这里可以借用CSS3 的 filter滤镜属性,一个最简单的设置: html { -webkit-filter:grayscale(100%); filter: grayscale(100%); } 由于是CSS3属性,所以自然会存在兼容问题,我们通过can i use查阅,可以看到该属性对于IE等老旧浏览器并不友好.

CSS设定图片变灰色

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

css: CSS3 filter(滤镜) 的使用

CSS3 filter(滤镜) 属性 filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度). 定义和使用 默认值 none 继承 no 动画支持 是.详细可查阅 CSS 动画 版本 CSS3 JavaScript 语法 object.style.WebkitFilter="grayscale(100%)" CSS 语法 filter: none | blur() | brightness() | contrast() | drop-shadow() | graysca

CSS3仿LOGO图片阴影特效

又一个CSS3阴影效果,个人感觉CSS3的阴影比传统的CSS滤镜实现的阴影更生动,阴影可以是无规则的,而且阴影的大小也是随时变化的,本例子就是用CSs3写成一个Logo,然后再加以阴影特效,重点不是展示阴影效果有多漂亮,而是如何去实现这种CSS3效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

彩色网页变黑白色CSS代码变黑白色调！

<style> html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; } </style> 将代码放入</head>

iOS滤镜 图片处理

摘要:本文结合实例详解了OS X和iOS图像处理框架Core Image的使用,如何通过Core Image来创建和使用iOS的内置滤镜,非常适合初学者学习.虽然示例代码是用Swift写的iOS程序,不过实现概念很容易转换到Objective-C和OS X. 这篇文章会为初学者介绍一下Core Image,一个OS X和iOS的图像处理框架. 如果你想跟着本文中的代码学习,你可以在GitHub上下载示例工程.示例工程是一个iOS应用程序,列出了系统提供的大量图像滤镜以供选择,并提供了一个用户界面

c# winform 把彩色图片转换为灰色的图片,变灰,灰度图片,速度很快,safe,unsafe

把彩色图片转换为灰色的图片,直接用.net接口遍历每个像素点转换的效率非常低,800K的图片65万像素我的电脑要用5分钟,而用了unsafe,速度提高了几千倍,同样的图片只用了0.几秒 附一个常用的遍历像素点转换的代码 构造函数 C#代码   public Tphc() { InitializeComponent(); this.pictureBox1.ImageLocation = "F:\\黑色头发.jpg"; } 按钮单击事件 C#代码   private void button

iOS 让图片变模糊

#import <Accelerate/Accelerate.h> 1.初始化图片 UIImageView *iv = [[UIImageView alloc]initWithFrame:[UIScreen mainScreen].bounds]; [iv setImage:[self blurryImage:[UIImage imageNamed:@"welcome_2.jpg"] withBlurLevel:0.6]]; [self.view addSubview:iv