网站变灰效果实现

网站变灰实现:

1 html {
2     -webkit-filter: grayscale(100%);
3     -moz-filter: grayscale(100%);
4     -ms-filter: grayscale(100%);
5     -o-filter: grayscale(100%);
6     filter: grayscale(100%);
7     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
8 }

MDN 的官方介绍:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter。

其所有用法示例如下:

/* URL to SVG filter */filter: url("filters.svg#filter-id");
/* <filter-function> values */filter: blur(5px);filter: brightness(0.4);filter: contrast(200%);filter: drop-shadow(16px 16px 20px blue);filter: grayscale(50%);filter: hue-rotate(90deg);filter: invert(75%);filter: opacity(25%);filter: saturate(30%);filter: sepia(60%);
/* Multiple filters */filter: contrast(175%) brightness(3%);
/* Global values */filter: inherit;filter: initial;filter: unset;

兼容性方面:除了 IE,其他的 PC、手机端的浏览器都支持了,Firefox 的 PC、安卓端还单独对 SVG 图像加了支持。

原文地址:https://www.cnblogs.com/xiao2013/p/12643793.html

时间: 2024-10-11 02:03:35

网站变灰效果实现的相关文章

转载网易博客:整理各大网站让网站变灰的css代码

2013-07-21 15:06:47 北京时间2013年4月20日8时02分四川省雅安市芦山县(北纬30.3,东经103.0)发生7.0级地震.震源深度13公里.各大网站将其网站变灰,本人整理了下部分网站变灰的css代码. 1.将网站全部变灰 html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-

利用filter实现网站变灰

今年是一个特殊的清明节,举国哀悼,很多网站也都实现了变灰.很多网站包括主页和内容也都已经变成了灰色,比如百度.B 站.爱奇艺.CSDN 等等.大家可以看到全站的内容都变成灰色了,包括按钮.图片等等.这时候我们可能会好奇这是怎么做到的呢?有人会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式.但你想想这个成本也太高了,而且万一某个控件忘记加灰色样式了岂不是太突兀了. 其实,解决方案很简单,只需要几行代码就能搞定了.我们只要将下面这行 CSS 样式,加

css+js网站变灰

历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命 重写一套css?NO,即便你有这个时间重写,那网站内的图片怎么办?难道重做一遍?很明显工作量巨大不符合实际. 火狐和chrome浏览器比较简单,直接用css3搞定: <style type="text/css"> body { filter: grayscale(100%);/*火狐*/ -webkit-filter:grayscale(100%);/*chrome*/ } </style>

Wordpress网站变灰/黑白主题

网站主题灰度显示 在style.css文件顶端添加下行代码即可 html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); } ? 2020开年一切都是那么的不平凡,这段时间我见证了太多的不可思议:修建"火神山"."雷神山"医院,大批医疗人员志愿者奔赴湖北:各国政府及组织捐赠防控物资:各地省内省际长途关闭.火车实行隔

网站变灰

html {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=

网站变灰css

html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); }

网站变灰代码

html {   filter: grayscale(100%);//IE浏览器  -webkit-filter: grayscale(100%);//谷歌浏览器  -moz-filter: grayscale(100%);//火狐  -ms-filter: grayscale(100%);  -o-filter: grayscale(100%);  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  -webki

【CSS Demo】网站页面变灰

让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用. 实现效果(点击下面的按钮): 这里放一张图片作为效果展示: 其CSS代码如下: body{ -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); filter:progid:DXImage

UIImageView变灰

1.UIImageView圆角 [objc] view plaincopy CALayer *l = [cell.imgAvatarImage layer]; [l setMasksToBounds:YES]; [l setCornerRadius:6.0]; 2.UIImageView显示圆形 [objc] view plaincopy UIImageView *imageView1 = [[UIImageViewalloc] initWithImage:[UIImageimageNamed: