/ 博客 / 141浏览

CSS实现特定图片反色

思路:

  1. 利用通配符*=找出特定图片
  2. 加上滤镜filter: invert(1)

用处:

比如网站加了夜间模式,由于某些图标是暗色的,在夜间模式下看不清,那么使用一行CSS代码可以非常简单的实现高亮。

例子:

/* 查找所有文件名包含“mac-3”的图片并反色 */
body.night div.surface-content img[src *="mac-3"] {
	filter: invert(1);
}

效果:

使用前
使用后

3

  1. 不亦乐乎

    看起来还以为只有苹果图标反色。。。

    Google Chrome 93 · Windows 10
    1. S

      @不亦乐乎目前只设了苹果和wp图标反色

      Wordpress App 18 · iPad iOS 14.7.1
  2. Mr.Chou

    Css还具备ps的滤镜,强

    Microsoft Edge 45 · Android 10

回复 Mr.Chou 取消回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注