用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>
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui