css中filter过滤修改图片

最新推荐文章于 2022-12-07 13:34:54 发布

beichen3997

最新推荐文章于 2022-12-07 13:34:54 发布

阅读量784

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/beichen3997/article/details/84649189

版权

css 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.img{
				/* filter:blur( ) 高斯模糊 */
				/* filter:blur(2px) ; */
				/* brightness(%) 线性乘法可以让图片看起来更亮或者更暗 */
				/* filter:brightness(70%); */
				/* contrast(%) 对比度调整图像的对比度。 */
			/* 	 filter:contrast(50%);
				 drop-shadow(h-shadow v-shadow blur spread color)
				给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速
				利用这个方案，我们其实改变类似于一些图标的颜色，比如黑色的图标变成蓝色的图标。 */
				/* filter: drop-shadow(705px 0 0 #ccc); */
				/* hue-rotate(deg) 色相旋转 */
			/* 	 filter:hue-rotate(70deg);
				 invert(%) 反转,这个函数的作用是反转输入图像，有点像曝光的效果 */
				/* filter:invert(100%)
				 grayscale(%) 将图像转换为灰度图像,这个效果可以将图片做旧，有一种时代沧桑感。喜欢古风的人一定会喜欢上这个效果的 */
				 /* filter:grayscale(80%); */
				/*  filter: grayscale(100%);
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%); */
				/* sepia(%) 将图像转换为深褐色下面给我一个暖暖的色调。 */
				/* filter:sepia(50%); */
				filter:url(#change);
			}
		</style>
	</head>
	<body>
	<!-- 	<svg height="0" xmlns="http://www.w3.org/2000/svg">
		    <defs>
		        <filter id="change">
		                <feColorMatrix type="matrix" values="
		                0 0 0 0 0.55
		                0 0 0 0 0.23 
		                0 0 0 0 0 
		                0 0 0 0 1" />
		        </filter>
		    </defs>
		</svg> -->
		<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="change">
               <feColorMatrix values="3 -1 -1 0 0
                       -1 3 -1 0 0
                       -1 -1 3 0 0
                       0 0 0 1 0" />
        </filter>
    </defs>
</svg>
		<img src="img/list.jpg" class="img">
	</body>
</html>