时间戳

首页 > 解决方案 > 如何获得文本颜色以对比其容器？

vue.js - 如何获得文本颜色以对比其容器？

问题描述

q-breadcrumb-el对于Quasar ，我正在尝试将q-toolbar. 但是，面包屑文本是不可见的，因为它与工具栏的背景颜色（主题原色）相同。
用于工具栏（例如q-toolbar-title）的 Quasar 组件以正确对比的颜色呈现文本。我可以在模板中对颜色进行硬编码，但如果主题原色更改为浅色，则会失败。

  1. 在 Quasar（或 Vue 或 vanilla CSS）中是否有一个常见的成语可以说“与背景颜色形成对比”或“与 xxx 元素中的文本颜色相同”？（即，所有酷孩子都知道的东西？）
  2. 我怎样才能确定它是怎么q-toolbar-title做的？
<q-toolbar>
  <q-toolbar-title>Wiki Page</q-toolbar-title>  <!-- <== white text on primary color background -->
  <q-breadcrumbs>
    <q-breadcrumbs-el
      v-for="section in sections"
      :key="section.label"
      :label="section.label"
      :to="section.path"
      class="text-white"    <!-- <== works, but is fragile -->
    ></q-breadcrumbs-el>
  </q-breadcrumbs>
</q-toolbar>

标签： vue.jsquasar

解决方案

如果我得到你的意思。

  • 添加一个 CSS text-stroke 属性，颜色只能是黑色或白色。以便区分文本颜色和工具栏颜色。
<q-toolbar>
  <q-toolbar-title>Wiki Page</q-toolbar-title>  <!-- <== white text on primary color background -->
  <q-breadcrumbs style="font-size: 20px;-webkit-text-stroke: 0.4px black;">
    <q-breadcrumbs-el
      v-for="section in sections"
      :key="section.label"
      :label="section.label"
      :to="section.path"
      class="text-white"    <!-- <== works, but is fragile -->
    ></q-breadcrumbs-el>
  </q-breadcrumbs>
</q-toolbar>

推荐阅读