伟大的革命先烈们为我们祖国的诞生做出了巨大的牺牲，在相应节日里，我们的站点会呈现灰色哀悼模式，以此来纪念先烈们。国内大厂首页也是这样做的。

filter 属性定义元素（通常是 <img>）的视觉效果（如模糊和饱和度）。

默认值：	none
继承：	否
动画制作：	支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.filter="grayscale(100%)"

滤镜函数

注释：使用百分比值（例如 75％）的滤镜，也接受该值是十进制（例如 0.75）。

滤镜	描述
none	默认值。规定无效果。
blur(px)	对图像应用模糊效果。较大的值将产生更多的模糊。如果为指定值，则使用 0。
brightness(%)	调整图像的亮度。 0％将使图像完全变黑。默认值是 100％，代表原始图像。值超过 100％将提供更明亮的结果。
contrast(%)	调整图像的对比度。 0％将使图像完全变黑。默认值是 100％，代表原始图像。超过 100％的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color)	对图像应用阴影效果。可能的值： h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。 v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。 blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。 spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。注释：Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。 color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。这个例子创建了红色的阴影，水平和垂直方向均为 8px，带有 10px 的模糊效果： filter: drop-shadow(8px 8px 10px red); 提示：这个滤镜类似 box-shadow 属性。
grayscale(%)	将图像转换为灰阶。 0% (0) 是默认值，代表原始图像。 100％将使图像完全变灰（用于黑白图像）。注释：不允许负值。
hue-rotate(deg)	在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。注释：最大值是 360deg。
invert(%)	反转图像中的样本。 0% (0) 是默认值，代表原始图像。 100％将使图像完全反转。注释：不允许负值。
opacity(%)	设置图像的不透明度级别。opacity-level 描述了透明度级别，其中： 0% 为完全透明。 100% (1) 是默认值，代表原始图像（不透明）。注释：不允许负值。提示：这个滤镜类似 opacity 属性。
saturate(%)	设置图像的饱和度。 0% (0) will make the image completely un-saturated. 100% is default and represents the original image. Values over 100% provides super-saturated results. 注释：不允许负值。
sepia(%)	将图像转换为棕褐色。 0% (0) 是默认值，代表原始图像。 100％将使图像完全变为棕褐色。注释：不允许负值。
url()	url() 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。实例： filter: url(svg-url#element-id)
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

eg：

filter:grayscale(1) -- 使网页呈现哀悼模式相关推荐

如何修改页面呈现哀悼模式？
如何修改代码? 代码里怎么做的,使页面呈现哀悼模式??(其实是早上我司UI设计师跑来拿我电脑说我给你表演个哀悼) html {filter: grayscale(1); } filter:graysc ...
filter: grayscale(1)； | 网页变灰
效果 MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale grayscale(amount) ...
filter:grayscale(1)
filter:grayscale(1)使网页呈现哀悼模式伟大的革命先烈们为我们祖国的诞生做出了巨大的牺牲,在相应节日里,我们的站点会呈现灰色哀悼模式,以此来纪念先烈们. body{filter: g ...
css 的 filter:grayscale 哀悼模式
页面整体黑白一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念.那么今天小编就说说 ...
使网页变灰的代码(包括FLASH等所有网页元素).
使网页所有元素变灰的代码:把下面的代码加入网站的CSS文件中第一种方法: html{ filter:progid:DXImageTransform.Microsoft.BasicImage(gray ...
前端页面添加灰色滤镜,使网页整体变灰
前端页面添加灰色滤镜,使网页整体变灰修改css样式只需要在html的样式里面加一句代码 html,body,div,img{-webkit-filter: grayscale(100%);-moz ...
如何快速让你的站点进入灰白哀悼模式？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 小闪来源 | https://www.coo ...
2020年中国色纺纱行业市场现状分析，国内参与者呈现寡头模式「图」
一.色纺纱行业产业链色纺纱行业以棉花和各类化学纤维为原材料经过生产加工后制造出可供下游服装行业使用的纺织原料,其上游包括棉花种植.化学纤维制造等过程,下游则是织布制衣.服装运营销售等环节,因此,上游 ...
纪念日页面变灰是怎么实现的( filter: grayscale(100%)；)
在一些特殊的日子,我们可能会把页面变成灰色,我还有印象,有一次是一个国家纪念日,全部网页都变成了灰色,当时的4399小游戏都不能玩,我们思考一下他是怎么做到的呢,肯定不能一个一个的去改样式,其实他是用 ...

filter:grayscale(1) -- 使网页呈现哀悼模式

滤镜函数

eg：

filter:grayscale(1) -- 使网页呈现哀悼模式相关推荐

最新文章

热门文章