CSS滤镜实现鼠标悬停图片变黑白(灰色)

文章目录

前言
结语

前言

这几天在清理电脑文件夹，发现了N年前的一些小demo，顺手记录一下，都是一些比较简单的案例，话不多说了，直接看下文！

提示：以下是本篇文章正文内容，下面案例仅供参考

一.思路分析

没啥技术难点，主要是通过样式代码对图片容器进行自定义样式效果的渲染，从而达到变色的效果。

1.样式代码

body { 
	text-align:center;
}
.box { 
	margin:100px auto; 
	cursor:pointer;
}
.box img:hover {
	-webkit-filter: grayscale(100%); 
	-moz-filter: grayscale(100%); 
	-ms-filter: grayscale(100%); 
	-o-filter: grayscale(100%); 
	filter: grayscale(100%); 
	filter: gray;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二.具体实现

1.全部源码

代码如下（示例）：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>css滤镜实现鼠标悬停图片变黑白(灰色)title>
		<style>
			body { 
				text-align:center;
			}
			.box { 
				margin:100px auto; 
				cursor:pointer;
			}
			.box img:hover {
				-webkit-filter: grayscale(100%); 
				-moz-filter: grayscale(100%); 
				-ms-filter: grayscale(100%); 
				-o-filter: grayscale(100%); 
				filter: grayscale(100%); 
				filter: gray;
			}
		style>
	head>
	<body>
		<div class="box">
			<img src="http://k.sinaimg.cn/n/tech/crawl/0/w500h300/20190522/2255-hxhyiun2822255.jpg/w700h350z1l10t107a0.jpg" />
		div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.效果

演示如下（示例）：

在这里插入图片描述

结语

以上就是CSS滤镜实现鼠标悬停图片变黑白(灰色)的一种方式，也是非常简单的一种实现方式。

创作不易，感谢您的点赞与支持。

相关阅读:
我的第一个 Intellij 插件上线了
面向对象编程
学习Git (一）
MFC Windows 程序设计[229]之驱动盘浏览(附源码)
Kafka概念类总结
Go实现LogCollect：海量日志收集系统【上篇——LogAgent实现】
Java中的StringTable常量池
动手学深度学习（pytorch版）第二章-2.2数据预处理Note-pandas
Best Websites to Download Cracked Software for Free
【Rust指南】组织管理|路径表示|访问权限

原文地址：https://blog.csdn.net/weixin_44563573/article/details/128004185