css实现任意图片颜色置灰(或指定颜色)切换

最新推荐文章于 2024-07-25 14:15:14 发布

txp1993

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量2.5k

点赞数

分类专栏：技术资料文章标签： css 图片置灰颜色切换

本文链接：https://blog.csdn.net/txp1993/article/details/89839633

版权

技术资料专栏收录该内容

42 篇文章 0 订阅

订阅专栏

css实现任意图片颜色置灰(或指定颜色)切换，该代码为备份内容，以便下次查找

1.html部分：

<div class="imgDiv"><i class="off_line imgChange" title="离线"></i>离线</div>

2.css部分：

.off_line {
  background: url("../img/monitor/off_line.png") no-repeat left center / 100% 100%;
}

.imgDiv {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.imgChange {
  //filter: grayscale(100%);
  position: relative;
  left: -10000px;
  -webkit-filter:drop-shadow(10000px 0 #E6E6E6);
  filter:drop-shadow(10000px 0 #E6E6E6);
}