<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.normal{
width: 200px;
height: 200px;
border: 2px dashed blueviolet;
}
#img1{
-webkit-filter: grayscale(1);/*灰度*/
}
#img2{
-webkit-filter: sepia(1);/*旧照片*/
}
#img3{
-webkit-filter: saturate(0.5);/*饱和度*/
}
#img4{
-webkit-filter: saturate(3);/*饱和度*/
}
#img5{
-webkit-filter: hue-rotate(160deg);/*色相*/
}
</style>
</head>
<body>
<img id="img1" class="normal" title="normal" alt="HTML5 Logo" src="img/P_048.jpg"/>
<img id="img2" class="normal" title="normal" alt="HTML5 Logo" src="img/P_048.jpg"/>
<img id="img3" class="normal" title="normal" alt="HTML5 Logo" src="img/P_048.jpg"/>
<img id="img4" class="normal" title="normal" alt="HTML5 Logo" src="img/P_048.jpg"/>
<img id="img5" class="normal" title="normal" alt="HTML5 Logo" src="img/P_048.jpg"/>
</body>
</html>
转载于:https://www.cnblogs.com/996158041chenlu/p/5730659.html