用css实现改变图片滤镜

常见的滤镜属性

  • 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>
相关推荐
人工智能训练师26 分钟前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny0730 分钟前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy1 小时前
css的基本知识
前端·css
昔人'2 小时前
css `lh`单位
前端·css
破无差2 小时前
《赛事报名系统小程序》
小程序·html·uniapp
Nan_Shu_6143 小时前
Web前端面试题(2)
前端
知识分享小能手3 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
2501_918126914 小时前
用html5写一个flappybird游戏
css·游戏·html5
蚂蚁RichLab前端团队4 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光5 小时前
css之一个元素可以同时应用多个动画效果
前端·css