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滤镜实现鼠标悬停图片变黑白(灰色)的一种方式，也是非常简单的一种实现方式。

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

相关阅读:
基于spring boot 的学生科研项目共享平台毕业设计源码271611
详解设计模式：解释器模式
leetcode152 乘积最大子数组
ICV:《中美量子产业融资比较分析》
Springboot中的多环境开发
redis中的zset的原理
5. C# :单选框RadioButton、标签Label、列表框ListBox
CYEZ 模拟赛 5
vue2学习之路由（router以及vue-router）
指望识别技术

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