用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>
相关推荐
沙尘暴炒饭4 分钟前
vuex持久化vuex-persistedstate,存储的数据刷新页面后导致数据丢失
开发语言·前端·javascript
2401_837088506 分钟前
CSS清楚默认样式
前端·javascript·css
zwjapple18 分钟前
React 的 useEffect 清理函数详解
前端·react.js·前端框架
Jewel10528 分钟前
如何配置Telegram Mini-App?
前端·vue.js·app
s11show_1631 小时前
hz修改后台新增keyword功能
android·java·前端
二个半engineer1 小时前
Web常见攻击方式及防御措施
前端
co松柏1 小时前
程序员必备——AI 画技术图技巧
前端·后端·ai编程
前端大白话1 小时前
前端人速码!10个TypeScript神仙技巧,看完直接拿捏项目实战
前端·javascript·typescript
五号厂房1 小时前
React 异步回调中产生的闭包问题剖析及解决
前端
用户2031196600962 小时前
GeometryProxy 和 GeometryReader 的区别
前端