v-invertcolors 指令

介绍

v-invertcolors 指令用于实现文字颜色和背景色的反转效果。它提供两种工作模式：基础模式会计算并应用反转颜色，混合模式则使用 CSS mix-blend-mode实现动态反转效果。

基础用法

直接在文本元素上添加 v-invertcolors 指令即可实现颜色反转效果。

普通文本（未应用反转）

反转效果文本

普通文本（未应用反转）

反转效果文本

查看代码

<template>
  <div class="invert-demo">
    <div class="demo-item" style="color: #333; background-color: #f5f5f5">普通文本（未应用反转）</div>
    <div class="demo-item" v-invertcolors style="color: #333; background-color: #f5f5f5">反转效果文本</div>
    <div class="demo-item" style="color: #fff; background-color: #4a2c7b">普通文本（未应用反转）</div>
    <div class="demo-item" v-invertcolors style="color: #fff; background-color: #4a2c7b">反转效果文本</div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.invert-demo {
  padding: 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
}

.demo-item {
  margin: 8px 0;
  padding: 12px;
  border-radius: 4px;
  text-align: center;
}
</style>

混合模式

通过设置 mode: 'blend' 启用混合模式，特别适合视频背景等动态场景。混合模式使用 CSS 的 mix-blend-mode: difference 实现，性能更好。

基础颜色反转

我是ikun，这是我gege

我喜欢唱、跳、rap、篮球

查看代码

<template>
  <div class="demo-container">
    <!-- 基础模式 -->
    <div v-invertcolors class="basic-demo">基础颜色反转</div>

    <!-- 混合模式 - 适用于动态背景 -->
    <div class="gif-container">
      <img src="../../../public/directives/invertcolors/ikun.gif" alt="background" class="background-gif" />
      <div class="text-content" v-invertcolors="{ mode: 'blend' }">
        <h1>我是ikun，这是我gege</h1>
        <p>我喜欢唱、跳、rap、篮球</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.demo-container > div {
  margin: 1rem 0;
}

.basic-demo {
  padding: 1rem;
  background-color: #4a2c7b;
  color: white;
  border-radius: 8px;
  text-align: center;
}

.gif-container {
  position: relative;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: black;
}

.background-gif {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-content {
  position: absolute;
  top: 65px;
  left: 130px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  color: white;
  z-index: 1;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

p {
  font-size: 1.2rem;
  max-width: 80%;
  margin: 0 auto;
  font-weight: bold;
  color: red;
}
</style>

API

属性名	说明	类型	是否必选	默认值
mode	反转模式：basic 为基础反转，blend 为混合模式	'basic' | 'blend'	○	'basic'

工作模式

基础模式 (basic)

• 默认模式
• 通过 JavaScript 计算反转颜色
• 适用于静态颜色场景
• 可以精确控制颜色计算

<div v-invertcolors>
  基础颜色反转效果
</div>

混合模式 (blend)

• 使用 CSS mix-blend-mode: difference
• 适用于视频背景等动态场景
• 性能更好，动画更流畅
• 自动适应背景变化

<div v-invertcolors="{ mode: 'blend' }">
  混合模式文字
</div>

注意事项

注意

• 该指令会修改元素的样式，请确保不会与其他样式设置产生冲突
• 混合模式下文字颜色会被设置为白色以获得最佳效果
• 混合模式需要浏览器支持 mix-blend-mode 属性
• 使用混合模式时，建议设置合适的层级关系（z-index），同时保证其使用对象的直系父元素为底层颜色对象

最佳实践

1. 视频背景场景：

<div class="container">
  <video autoplay loop muted>
    <source src="video.mp4" type="video/mp4">
  </video>
  <h1 v-invertcolors="{ mode: 'blend' }">
    动态文字
  </h1>
</div>

2. 静态颜色场景：

<div class="colored-section">
  <p v-invertcolors>
    自动反转颜色的文字
  </p>
</div>