滤镜和自适应字体颜色

介绍

记录Css常用的滤镜和自适应背景颜色设置

Css滤镜设置自适应字体颜色

• 在项目中，经常会碰到背景色不确定的场景，为了让内容文字足够清晰可见，文字和背景之间需要有足够的对比度。换句话说，当背景是深色时，文字为白色，当背景是浅色时，文字为黑色，就像这样：

• 通常这种情况，大家可能会通过 js 去计算背景色的深浅度（灰度），算法是公开的，如果已知颜色的RGB值，那么可以通过以下方式得到颜色灰度

luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255

• 这样可以得到一个0~1之间的范围值，可以根据需求，设定一个阈值，超过表示为浅色，否则为深色。
• 这种方式是通过JS实现的, 通过滤镜filter (opens new window) 滤镜也能实现

通过滤镜实现

• HTML的结构是这样的
  • 因为要使用滤镜对文字单独处理，所以需要额外一层标签。

<div class="background-filter">
  <span class="background-text">通过filter滤镜属性自适应背景颜色</span>
</div>

• 然后，容器和文字用同一种颜色表示，目的是让文字颜色和背景相关联，可以通过currentColor实现
  • currentColor是background-color (opens new window)的关键字, 通过设置color字体颜色, 让background-color背景颜色和字体颜色一致

.background-filter{
  color: #ffeb3b;
  background-color: currentColor;
}

• 通过后3个滤镜属性, 让文字实现自适应颜色
  • 灰度滤镜 (opens new window)grayscale，可以将彩色的文字转换成灰色
  • 对比度滤镜 (opens new window)contrast，可以极大的增强对比度，黑的更黑，白的更白，如果是浅灰，那就变成白色，如果是深灰，那就变成黑色
  • 反转滤镜invert，可以翻转颜色，颠倒黑白

.background-text{
  filter: grayscale(1) contrast(999) invert(1)
}

• 效果如下

• 实现的思路
  • 通过grayscale滤镜把字体转换成灰色,让字体颜色不随着背景变化 , 然后再通过contrast滤镜加大字体的对比度加强灰色字体的显示效果让其达到白色更白, 黑色更黑, 再通过invert反转颜色, 由于前面的操作是将原有颜色经过滤镜转换成了和自身相对应的白色或者黑色，但是是相反的，所以需要用到反转滤镜invert，颠倒黑白

完整代码

• 使用了naiveui (opens new window) 的颜色选择器基于Vue3

<template>
  <div class="background">
    <div class="background-picker">
      <n-color-picker
        placement="top"
        :default-value="backgroundColor"
        :modes="['hex']"
        :on-update:value="completeColor"
      />
    </div>
    <div class="background-filter">
      <span class="background-text">通过filter滤镜属性自适应背景颜色</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const backgroundColor = ref('#FF3040FF')
const completeColor = (color: string) => {
  backgroundColor.value = color
}
</script>
<script lang="ts">
export default {
  name: 'FilTer'
}
</script>
<style lang="scss" scoped>
.background {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  .background-picker {
    width: 400px;
    height: 50px;
  }
  .background-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 100px;
    font-size: 20px;
    color: v-bind('backgroundColor');
    background-color: currentColor;
    > span {
      filter: grayscale(1) contrast(999) invert(1);
    }
  }
}
</style>

参考文献

Amazing!如何根据背景色自动切换黑白文字？ (opens new window)