用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>
相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎9 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip