css3为图片添加滤镜(filter)

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>

css3为图片添加滤镜(filter)_第1张图片

你可能感兴趣的:(css,filter,css3)