CSS控制图像变红

最新推荐文章于 2023-07-12 10:20:03 发布

世界还赞颂沉默吗

最新推荐文章于 2023-07-12 10:20:03 发布

阅读量1.8k

点赞数

分类专栏： #css 文章标签： css html

本文链接：https://blog.csdn.net/qq_43574741/article/details/119982891

版权

#css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css制作hover变红效果，对于文字只需要设置color：red，但这对于图片无效。

图片变色的方法：

CSS3 filter(滤镜) 属性
有多种滤镜，多种方法，这里使用svg滤镜

filter:url(#colorMeMatrixRed);

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
	</head>
	<style>
/* 		#one{
			filter:url(#colorMeMatrixRed);
		} */
	</style>
	<body>
		<div id='one'><img src="img/拍照.png"></div>
		<div id='two'><img src="img/拍照.png"></div>
		<svg>
			<filter id="colorMeMatrixRed">
				<feColorMatrix in="SourceGraphic" type="matrix" values="1 1 1 1 0
				              0 0 0 0 0
				              0 0 0 0 0
				              0 0 0 1 0" />
			</filter>
		</svg>
	</body>
</html>

此处使用SVG过滤器feColorMatrix，type设置只取红色通道的值，效果如下：

在这里插入图片描述
想取其他颜色的，可以参考教程：
有意思！强大的 SVG 滤镜

世界还赞颂沉默吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS控制图像变红

css制作hover变红效果，对于文字只需要设置color：red，但这对于图片无效。图片变色的方法：CSS3 filter(滤镜) 属性有多种滤镜，多种方法，这里使用svg滤镜filter:url(#colorMeMatrixRed);代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试</title> </head>
复制链接

扫一扫