图标改色|颜色自定义|CSS3 filter|伪类改色

然后他就拿棍子来打我

已于 2023-12-21 18:45:25 修改

阅读量304

点赞数

分类专栏： CSS3 文章标签： css3

于 2023-05-15 10:57:11 首次发布

本文链接：https://blog.csdn.net/DianliuKekedou/article/details/130680002

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS3 提供 filter 属性，可以过滤原图形的颜色。
利用伪类覆盖原图标，通过filter 属性 drop-shadow方法，重新定义色值的

一、原图标

.screen-switch {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  background: url(/img/map.5439d40f.svg) no-repeat;
  background-size: contain;
}

在这里插入图片描述

二、修改后

.screen-switch::after {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  transform: translateX(-2.4rem);
  background: inherit;
  filter: drop-shadow(2.4rem 0 0 #f00);  /** 自定义颜色 */
}