CSS3 filter grayscale 将整个界面变为黑白灰色调

最新推荐文章于 2024-05-13 17:48:02 发布

原创最新推荐文章于 2024-05-13 17:48:02 发布 · 1.1w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

转载请注明出处——https://blog.csdn.net/chy555chy

收录于

CSS3

当前文章被收录于：

CSS3

20 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何使用不同的CSS方法来实现网页的灰度显示效果。包括通过外部样式表链接、内联样式以及直接在HTML标签中嵌入代码三种方式。这些方法能够帮助开发者灵活地为网站添加视觉调整功能。

通过外部样式

<link rel="stylesheet" type="text/css" href="myGrayscale.css">

myGrayscale.css

html {
    /* IE 浏览器 */
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: grayscale(100%);
}

通过内联样式

<style type="text/css">
html {
    /* IE 浏览器 */
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: grayscale(100%);
}
</style>

嵌入代码

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter: grayscale(100%);">

标签

#css3 #filter #grayscale

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

福州司马懿

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

别再手动调学习率了！用Keras的CosineAnnealing回调函数，让你的模型收敛又快又稳

weixin_30756499的博客

04-19

183

本文深入解析了Keras中的CosineAnnealing回调函数，这是一种基于余弦退火原理的自动化学习率调度技术。通过对比传统手动调整方法，展示了余弦退火在模型训练中的显著优势：平滑过渡、自适应节奏和有效跳出局部最优。文章提供了完整的实现代码和CIFAR-10实战案例，帮助开发者快速掌握这一提升模型收敛效率的关键技术。

filter:grayscale(1)

柒柒兮的博客

10-09

3887

filter:grayscale(1)使网页呈现哀悼模式伟大的革命先烈们为我们祖国的诞生做出了巨大的牺牲，在相应节日里，我们的站点会呈现灰色哀悼模式，以此来纪念先烈们。 body{ filter: grayscale(1); } 效果展示 ...

参与评论您还未登录，请先登录后发表或查看评论

CSS3的filter(滤镜)属性详解

fantasy_geek的博客

03-20

2390

1、blur模糊 blur的效果顾名思义就是模糊，单位是px，例如：filter:blur(10px)效果如下，左为原图，右为使用blur的效果图，我非常怀疑今年朋友圈的红包照片微信团队就是这么干的： blur(10px) 当blur(100px)时可以看到图片几乎看不到了 blur(100px) 这个值必须为正值，为负值时没有任何效果，如blur(-100px)： blur(-100px) 2、...

filter属性常用的三个值

LIANG_XJT的博客

05-28

1970

filter属性常用的三个值 filter属性它可以调整页面的图片的可视效果，一般我们用来设置img。它可以设置图片模糊程度、亮度、饱和度、透明度…下面我就将经常使用到的三个属性值列出来。 grayscale 灰度从图片中我们可以看出加了filter：grayscale（值为0-1之间的小数）；属性的第二张图片变灰了，这就是grayscale属性值的效果，而灰度也是可以调整的通过调整geayscale()括号里面的小数来改变灰度深度，括号里面的值只能为0-1之间才会有效果，0...

filter: grayscale(1)； | 网页变灰

随便写写

12-01

1487

2.58 icA:/ 一行css把网站变黑白 # 前端 # 前端学习 # 干货分享 # 程序员 https://v.douyin.com/rwxq86K/ 复制此链接，打开Dou音搜索，直接观看视频！

通过css设置filter 属性，使整个页面呈现灰度效果，让整个网页变灰

m0_47791238的博客

08-15

5241

通过css设置filter 属性设置页面整体置灰。

灰色CSS滤镜 grayscale

@奮鬥@的专栏

07-11

6437

灰色CSS滤镜 2011-02-12 13:34:24| 分类：学习|字号订阅加入一个CSS滤镜即可 /*可以body改为需要的标签*/ body{ filter: gray; } CSS处理图片彩色变灰色 style="FILTER: alphaopacity=80 gray" html { filter:progi

grayscale实现全站及局部变黑的效果 – 兼容IE/FF等浏览器

weixin_34377065的博客

09-23

593

grayscale实现全站及局部变黑的效果 – 兼容IE/FF等浏览器时间:11-11-10所属栏目:前端效果来源:james.padolsey.com点击:470次大小：0.04 MB 下载次数：190 发布时间：2011-11-10 兼容性：IE6/7/8/9,FF,Opera 点击下载查看演示内容介绍大家都知...

火狐firefox,IE,网站变灰变黑兼容代码

weixin_30808253的博客

09-16

577

内容提要：大家都知道在IE浏览器中，可以使用一段代码 body {filter: gray;} 用微软的滤镜代码将网站整体去色成为黑白灰色调效果，但是并不兼容firefox等其他非IE浏览器。　　大家都知道在IE浏览器中，可以使用一段代码 body {filter: gray;} 用微软的滤镜代码将网站整体去色成为黑白灰色调效果，但是并不兼容firefox等其他非IE浏览器。 C...

CSS filter滤镜属性使用

热门推荐

YunWisdom

12-27

1万+

CSS的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过CSS对图像进行处理，CSS的filter属性可以得到一些类似PS的滤镜效果。浏览器支持情况：只有IE浏览器不支持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit-。

CSS “filter：gray;” 图片头像变灰白

xuanjiewu的专栏

11-14

4155

对于IE用户这个问题是解决了，但在firefox下就不起作用了。问题在于IE有滤镜的支持，而firefox就没有。后来只能是在firefox下将图片半透明显示，也能起到满意的效果。 "filter：gray; -moz-opacity:.1;opacity:0.1;" 这行代码在IE下图片变为灰色，在firefox下半透明显示。 filter：gray 这个属性只有IE支持，

用原生css实现高斯模糊、黑白等滤镜效果

angran79676765的专栏

05-28

482

—引导— 在CSS3中，有一个强大的属性，那就是filter属性，filter顾名思义就是“滤镜”的意思，用filter属性可以让图片无需PS处理就达到一些简单的显示效果。 —定义和使用— filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。默认值 none 继承 none 动画支持...

滤镜 filter：gray 变灰色

qq_34569508的博客

12-30

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

filter: grayscale(%)；设置灰色遮罩层后，怎样让头像颜色不受灰色遮罩层影响？

weixin_55409927的博客

12-12

1119

filter: grayscale(%)；设置灰色遮罩层后，怎样让头像颜色不受灰色遮罩层影响？

CSS常用滤镜效果

不负光阴不负自己，不负被爱不负所爱

05-13

1119

CSS 提供了多种滤镜效果，可以通过filter属性应用于 HTML 元素。将图像转换为灰度图像。给图像应用色相旋转。值以度为单位。增加或减少图像的饱和度。增加或减少图像的亮度。增加或减少图像的对比度。反转图像的颜色。给图像应用模糊效果。

CSS中神奇的filter属性

有事儿私信。

12-14

2348

CSS是Web开发中不可或缺的一部分，它可以帮助开发者在页面上添加各种各样的样式和效果。其中一个比较神奇的CSS属性就是`filter`，它可以让我们实现各种有趣的图形处理效果。

CSS实现滤镜效果并动态调整

丘秋的博客

08-18

1325

CSS实现滤镜效果实现图片的滤镜效果只需要使用css3 的Filter 滤镜属性就能够简单完成主要效果代码  <img src="sunflower-3292932__340.jpg" style="filter: blur(3px);"/>  <img src="sunflower-3292932_...

jquery css(filter_'gray'),css3 filter滤镜属性使用

weixin_29315091的博客

08-03

593

最近在修改内网门户的时候，恰好遇到了需要使用滤镜的地方；刚开始用的是两张图片；鼠标滑过背景变成渐变；图标切换；但是后台配置了图标后；导致鼠标滑过图标不能正常切换；于是就想到了滤镜的效果来处理。所以顺便学习了一下常用的滤镜效果。使用滤镜：前言css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过css对图像进行处理。浏览器支持情况：只有IE浏览器不支持fil...

css 样式之 filter 滤镜属性用法与示例

weixin_50339217的博客

08-18

6381

css 样式之滤镜 filter 属性