用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>
相关推荐
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird5 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者6 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强6 小时前
Chrome和IE获取本机ip地址
前端
天***88966 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*6 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v7 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls7 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友7 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵7 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构