`

是整个网页以 灰度 模式 显示 灰色(黑白)

css 
阅读更多
/*  css3  的filter  兼容性,请参考
http://caniuse.com/#feat=css-filters
*/

html {
  
  -webkit-filter: grayscale(1); //  如果未设置值,默认是100%
  filter:gray();  //或者filter : progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
  filter: url(gray.svg#grayscale);
}



/* http://www.zhangxinxu.com/study/201208/css3-grayscale-filter-use-svg.html  */

针对firefox 参照上面css-filters 的兼容性,暂时使用svg
svg 代码
<svg version="1.1" 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>


以上svg代码保存为svg文件在css里 加入

filter: url(gray.svg#grayscale);
分享到:
评论

相关推荐

    Qt实战案例之利用QImage类实现对图像的简单处理(显示图像、灰度化处理)

    在本文中,我们将深入探讨如何使用Qt框架中的QImage类来实现图像的简单处理,包括显示图像和灰度化处理。Qt是一个强大的跨平台应用程序开发框架,广泛应用于GUI编程,而QImage是Qt中用于处理图像的核心类。 首先,...

    第五十课:ps灰度色彩模式学习(颜色模式)归纳.pdf

    在Photoshop中,灰度色彩模式是一种特殊颜色模式,它不包含任何色相,只由纯黑、纯白以及它们之间的各种过渡色调组成。灰度色彩模式是RGB色域的一个子集,它基于红绿蓝三原色光的等量混合。在RGB模式下,每个颜色...

    使整个页面变灰 样式代码

    在网页设计与开发过程中,有时候我们需要将整个网页变成灰度模式,例如在纪念日或哀悼活动中,网站可能会选择将色彩丰富的图片转换成黑白灰度效果,以此表达敬意或哀思。本文将详细介绍如何通过简单的CSS代码实现...

    使用 GAN 对灰度图像进行着色_python

    为黑白照片上色目前是一项艰苦且劳动密集型的过程。它必须由熟练的平面设计师在 Photoshop 中手动完成,整个过程可能需要很长时间,因为它依赖于设计师的想象力和效率来产生逼真的色彩。 GAN 可以通过在数千次训练...

    数字图像处理基于半色调打印技术

    数字图像处理领域中,半色调技术被广泛应用于黑白打印机或低分辨率彩色打印机中,以模拟连续灰度图像的效果。该技术的核心思想是利用不同的点模式来近似表示不同灰度级别的像素,从而在视觉上达到灰度渐变的效果。 ...

    网页变黑白色,兼容IE10、IE11

    在网页设计中,有时为了表示哀悼或特殊纪念,我们需要将网页的颜色调整为黑白色或灰度模式。本文将详细探讨如何实现“网页变黑白色”这一功能,并确保其在Internet Explorer (IE) 的10及11版本上兼容。 首先,我们...

    Photoshop之色彩模式和色调调整命令.pdf

    4. **灰度模式**:灰度模式中只有不同深浅的灰色,没有彩色。灰度图像可以有多种位深度,如8位或16位,位深度越高,颜色层次越丰富。 5. **索引颜色模式**:索引颜色模式通过限制颜色数量来减小文件大小,适用于...

    数字图象的几种色彩模式.docx

    当从灰度模式转换回RGB时,每个像素的灰度值会被用来确定其在RGB空间中的颜色。 在处理图像时,选择正确的色彩模式至关重要。例如,位图模式适合制作矢量图形,而RGB模式适用于网页设计和屏幕显示。理解并熟练运用...

    2022年职称计算机photoshop备考练习(一) 1.docx

    位图模式仅支持黑白两种颜色,因此需要先将彩色或灰度图像转换为灰度模式。 3. 索引颜色模式的图像通常包含256种颜色(B.256)。这种模式主要用于存储颜色有限的图像,如网页图形。 4. 当CMYK模式的图像转换为多...

    灰度图像二维otsu自动阈值分割.rar_OTSU_二维图像分割_灰度图像分割_阈值分割

    灰度图像,也称为单通道图像,由不同灰度级别的像素组成,每个像素用一个0到255之间的整数值表示,其中0代表黑色,255代表白色,中间的数值代表不同程度的灰色。这种图像类型在医学成像、卫星遥感、工业检测等领域...

    电脑屏幕亮度调节 对比度 灰度调节

    3. 如果您的设备支持,还可以启用“夜灯模式”或“护眼模式”,以减少蓝光对眼睛的影响。 对比度则是衡量屏幕上黑白之间差异程度的指标。高对比度能让图像色彩更加鲜明,而低对比度可能导致颜色区分不明显。调节...

    ImageHtml (图像转换ASCII)

    灰度模式下,图像的色彩被转化为不同程度的灰色,然后对应到ASCII字符的不同亮度。这种模式在保持图像基本结构的同时,简化了色彩,呈现出一种简洁的视觉效果。对于那些希望保持图像基本信息但又不想过于复杂的人来...

    灰度读转化为彩色图像

    这段代码中,`cv2.imread()`用于读取灰度图像,参数`cv2.IMREAD_GRAYSCALE`确保图像以灰度模式加载。然后,`cv2.cvtColor()`函数用于将灰度图像转换为RGB图像,其中`cv2.COLOR_GRAY2RGB`是预定义的转换代码。最后,`...

    2022年计算机二级考试试题.doc

    5. **图层创建限制**:如果图层调板的“创建新图层”按钮灰色不可选,可能是由于图像处于CMYK模式、索引颜色模式、灰度模式或双色调模式,这些模式下无法直接添加新图层。 6. **色彩模式转换**:RGB模式可以转换为...

    计算机二级photoshop考试试题(2).pdf

    16. **位图模式和灰度模式**:位图模式只包含黑白两色,但在灰度模式中像素可以是不同深浅的灰色。将灰度模式图像转换回位图时,足够亮的像素会变为白色。 以上知识点涵盖了Photoshop中的路径操作、图像模式、滤镜...

    GS color generation.pdf

    抖动是一种通过在面板上交替点亮黑白色像素以创建棋盘格状的模式来实现灰度显示的技术。使用这种方法时,应该以随机顺序产生模式以产生灰色的感知。文档提到,抖动通常是通过使用重复或规则的图案来完成的,这样灰度...

    网页配色设计PPT学习教案.pptx

    除了RGB和CMYK模式,索引色彩模式适用于需要限制颜色数量的网页设计,而灰度模式则主要应用于黑白图像。 其次,色彩在设计网页时不仅仅是一种视觉元素,它还能够对人的心理产生影响。色彩能够唤起不同的情感和联想...

    Grayscale the Web.rar

    这个插件的名字叫做“Grayscale the Web”,正如其名,它的主要功能是将用户浏览的网页转化为灰度模式。灰度化是一种将彩色图像转换为黑白或单色调图像的过程,这个特性在描述中被提及,有两个主要的应用场景。 ...

    2022年职称计算机photoshop备考练习(九).docx

    5. **位图模式与灰度编辑**:在位图模式中,黑色像素在灰度模式下经过编辑可能变为灰色。如果像素亮度足够高,转换回位图模式时,它会变成白色。因此,选项A“正确”符合这一现象。 6. **绘图工具与吸管工具**:在...

    在photoshop中正片叠底的作用是什么.pdf

    例如,将一个灰度图像作为叠加层,设置为正片叠底模式,可以用来调整底层彩色图像的色彩或亮度,因为灰度图像的不同灰度值会以不同的透明度影响下面的彩色图像,从而创造出艺术效果或调整色彩平衡。 在物体边缘,...

Global site tag (gtag.js) - Google Analytics