css3为图片添加滤镜(filter)

builder2991

已于 2023-06-26 16:51:32 修改

阅读量1.7k

点赞数

分类专栏： css 文章标签： filter css3

于 2020-05-07 17:10:15 首次发布

本文链接：https://blog.csdn.net/low666/article/details/105976268

版权

css 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

css3为图片添加滤镜(filter)

css3 filter语法解析

filter: none | blur() | brightness() | contrast() | drop-shadow() |grayscale() | hue-rotate() | invert() | opacity() | saturate() |sepia() | url();

属性	解释	举例
brightness(%)	亮度(值越大越亮)	brightness(200%)
blur(px)	设置模糊(值越大越模糊)	blur(5px)
contrast(%)	调整图像的对比度	contrast(200%)
drop-shadow	设置阴影效果	drop-shadow(0px 6px 11px #000)
grayscale(%)	灰度(值越大越灰) 值在0%到100%之间	grayscale(50%)
hue-rotate(deg)	色相旋转(超过360是又绕一圈)　值为angle	hue-rotate(90deg)
invert(%)	反色　值在0%和100%之间	invert(100%)
opacity(%)	透明度值在0%和100%之间	opacity(30%);
saturate(%)	饱和度	saturate(400%)
sepia(%)	褐色　值在0%和100%之间	sepia(100%)

注意：

drop-shadow(h-shadow v-shadow blur spread color)

h-shadow v-shadow (必须)设定水平、垂直方向阴影距离
blur(可选)值越大，越模糊
spread(可选)正值会使阴影扩张和变大，负值会是阴影缩小.
color(可选)

filter: url(svg-url#element-id)

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3filter(滤镜)</title>
		<style>
			.image{
				height:150px;
				width:150px;
			}
			.filter{
				overflow: hidden;
			}
			.filter img{
				float: left;
				margin: 25px;
			}
			.filter-img{
				height:150px;
				width:150px;
			    -webkit-filter:contrast(88%) hue-rotate(51deg) brightness(95%) drop-shadow(10px 6px 11px #268DFF);
			    filter:contrast(150%) hue-rotate(51deg) brightness(95%)  drop-shadow(10px 6px 11px #268DFF);
			}
		</style>
	</head>
		<div class="filter">
			<img class="image"src="1.jpg">
			<img class="filter-img" src="1.jpg">
		</div>
	<body>
	</body>
</html>

在这里插入图片描述

builder2991

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3为图片添加滤镜(filter)

css3为图片添加滤镜(filter)css3 filter语法解析filter: none | blur() | brightness() | contrast() | drop-shadow() |grayscale() | hue-rotate() | invert() | opacity() | saturate() |sepia() | url();属性解释举例...
复制链接

扫一扫