CSS使图片变灰

最新推荐文章于 2025-04-18 11:39:22 发布
转载 最新推荐文章于 2025-04-18 11:39:22 发布 · 203 阅读 · 0

本文介绍了一种在网站上将彩色图片转换为灰度图片的方法，并提供了具体的HTML和CSS代码示例。通过简单的代码调整，可以实现网页整体风格的快速变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


       为了悼念四川地震中死去的同胞，各大网站都纷纷将自己的站点颜色调灰，就连图片也一样，到底如何实现的呢，请看下面的代码。

〈img src="图片地址" style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'">


　　如果想让整个网站的图片变灰，在样式表中加入

img{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

按纽变灰
INPUT { border:1px solid #999;  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
css使图片变灰的实现方法
01-19
如果您是想将页面 网页变灰配合全国哀悼日的css代码 20100421 下面是图片特效。 1 一种是图片之间的替换，也就是将正常的图片再做成灰色的。这种方法应该是最稳定的了， 但是就要花费时间去做多余的那些图片了。应该算是比较费事的那种，程序员嘛，都比较懒， 喜欢让计算机干更多的事情。 2 于是又想到了第二种，就是用css来解决问题，上网一搜还真有。 将“filter：gray;”添加到图片的样式中就可以了。 这是应用了滤镜的效果。   对于IE用户这个问题是解决了，但在firefox下就不起作用了。问题在于IE有滤镜的支持，而firefox就没有。 后来只能是在firefox下将图片半透
CSS让图片置灰
sxmfendou的博客
01-24 2180
背景图片置灰加上样式：background-blend-mode: hue; image图片置灰，给图片加样式 .img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; opa.
CSS样式-图片变灰
weixin_45678513的博客
03-30 1668
利用CSS3的 filter（滤镜）属性 在图片的样式中添加 -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); 100%则表示完全变灰，0%则恢复图片原有颜色。 另附： -webkit- ，针对safari，chrome浏览器的内核CSS写法 -moz-，针对firefox浏览器的内核CSS写法 -ms-，针对ie内
CSS快速让图片变灰，网站快速变灰
weixin_30316097的博客
05-19 156
目前很多网站都变成灰色调掉念地震的死者。 站长们快都把网站风格改成灰色吧。 只需要几行CSS代码就可以了。 img{FILTER:gray;} a:linkimg{FILTER:gray} a:hoverimg{FILTER:gray} a:activeimg{FILTER:gray} /*永远记住20080512hooyes20080519*/ ...
图片变灰 css
houdabiao的博客
09-09 950
background-size: 20px 20px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;
纯CSS实现的点击显示大图背景变灰图片特效代码
01-23
这段CSS中，`.overlay` 的初始状态是完全透明的，当鼠标悬停在`.container` 上时，`.overlay` 的透明度变为0.6，使背景变暗。同时，大图通过改变`display`属性从隐藏变为显示。 为了实现点击显示大图的效果，我们...
CSS鼠标悬停图片上图片变灰 变色 半透明
10-08
在这个特定的问题中，我们关注的是如何通过CSS实现鼠标悬停时图片效果的变化，比如图片变灰、变色以及半透明。下面将详细介绍这些效果的实现方法。 1. 图片变灰： 当鼠标悬停在图片上时，可以使用CSS的`filter`...
css3复选框选中变灰特效
07-24
在本文中，我们将深入探讨如何使用CSS3来创建一个复选框选中变灰的特效。这个特效在用户界面设计中十分常见，可以为用户提供直观的反馈，指示他们已选择或未选择某个选项。让我们逐步解析这个过程。 首先，我们需要...
CSS控制，彩色图片变灰色
猫妖九尾
08-13 9315
<style> .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); ...
图中取字汉王PDF
04-26
只要图片中的文字够清晰就可以把图片中的文字提取出来。
Java EE 轻量级框架应用与开发 S2SH
03-31
Java EE 轻量级框架应用与开发---S2SH QST青软实训著 清华大学出版社 包含全部课件以及源代码
大学物理第3版（赵近芳主编）习题答案
05-25
大学物理第3版（赵近芳主编）习题答案，第2至16章的答案
模型检测的原理，方法，应用
06-15
模型检测原理模型检测原理模型检测原理模型检测原理模型检测原理模型检测原理模型检测原理模型检测原理
mapinfo实例教程详解（彻底学会mapinfo）
12-04
mapinfo实例教程详解（教你如何彻底学会使用mapinfo）
css图片设为灰色
最新发布
weixin_47124112的博客
04-18 497
【代码】css图片设为灰色。
css实现图片变灰效果
it_bird1999的博客
11-29 368
.unactive { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }
css 使图像变成灰色的技巧
学习笔记
03-06 4944
某些情况下，例如网页上如果使用合作方 logo，能使网站更显得有说服力，但是这些 logo 一般是彩色的，为了使其不过于分散网站用户的注意力，同时网页设计也应当遵循只使用一种主色的原则，所以应当将这些图像全部设为灰色： 使用 CSS filter 属性，但是得到的 logo 颜色有深有浅，不所以是理想的颜色： filter: grayscale(100%); 改成下面的 css： filter:brightness(0); opacity: 50%; 所有 logo 的颜色变为一致的灰
三种方法使图片变成灰色（前端技术）
热门推荐
huangpb的博客
03-03 3万+
1、CSS Filter 使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。 现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox、Chrome和Safari。以前,我们也提到Webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果。 添加如下CSS样式可以将图像变成灰色 img {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值