用css实现改变图片滤镜

pink大呲花2024-09-30 15:15

常见的滤镜属性

blur(px)：模糊效果
brightness(%)：亮度
contrast(%)：对比度
grayscale(%)：灰度
sepia(%)：怀旧效果
invert(%)：反转颜色
opacity(%)：不透明度

hue-rotate(deg)：色相旋转

以下是滤镜示例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滤镜</title> <style type="text/css"> img { width: 400px; height: 250px; display: block; margin: 0 auto; transition: all 3s; /*鼠标放上去恢复原效果，动画时间3秒*/ }

复制代码

  		/* -webkit-这个是做低版本兼容 */
  		img:hover {
  			-webkit-filter: none;
  		}

  		.img1 {
  			/*滤镜属性
  			 * grayscale:设置灰度，1是百分之百，0是百分之零
  			 * */
  			-webkit-filter: grayscale(0.5);
  		}

  		.img2 {
  			/*滤镜属性
  			 * brightness:设置亮度，默认值是1，正常亮度,比1大曝光
  			 * */
  			-webkit-filter: brightness(0);
  		}

  		.img3 {
  			/*滤镜属性
  			 * sepia:设置褐色属性，1为百分百褐色，0为默认正常
  			  */
  			-webkit-filter: sepia(1);
  		}

  		.img4 {
  			/*滤镜属性
  			 * blur:设置模糊度，单位是像素
  			 * */
  			-webkit-filter: blur(5px);
  		}

  		.img5 {
  			/*滤镜属性
  			 * contrast:设置对比度，正常是1
  			 * */
  			-webkit-filter: contrast(0);
  		}

  		.img6 {
  			/*滤镜属性
  			 * saturate:设置饱和度，正常是1
  			 * */
  			-webkit-filter: saturate(2);
  		}

  		.img7 {
  			/*滤镜属性
  			 * invert:设置胶片底色效果
  			 * */
  			-webkit-filter: invert(1);
  		}

  		.img8 {
  			/*滤镜属性
  			 * hue-rotate:设置色相旋转
  			 * */
  			-webkit-filter: hue-rotate(90deg);
  		}

  		.img9 {
  			/*实现图像慢慢画出来
  			 * */
  			-webkit-filter: blur(1px)brightness(60)grayscale(1);
  		}
  	</style>
  </head>
  <body>
  	<!-- 记得更改图片链接src。我用的图片是封面 -->
  	<img class="img0" src="./img/鬼刀..png" />
  	<img class="img1" src="./img/鬼刀..png" />
  	<img class="img2" src="./img/鬼刀..png" />
  	<img class="img3" src="./img/鬼刀..png" />
  	<img class="img4" src="./img/鬼刀..png" />
  	<img class="img5" src="./img/鬼刀..png" />
  	<img class="img6" src="./img/鬼刀..png" />
  	<img class="img7" src="./img/鬼刀..png" />
  	<img class="img8" src="./img/鬼刀..png" />
  	<img class="img9" src="./img/鬼刀..png" />
  </body>

</html>