html - 我可以在 ngStyle 中使用 lighten css 属性吗？

Question

我正在尝试在 ngStyle 中使用 lighten 属性，但它不起作用。

我在组件中有颜色变量，我想这样使用它:

<div [ngStyle]="{color: schedule.group.color, background: 'lighten(' + schedule.group.color + ', 50%)'}">

有人可以提供一些想法吗？

Answer 1

在 css 中没有“亮化”功能——它是关于 less 或 Sass 的。在互联网上有 javascripts 函数来制作它，例如。 this in css.trick

更新 重要! (改变功能)

  /**Credits to: https://css-tricks.com/snippets/javascript/lighten-darken-color/ */
  //amt from 0 to 100
  lightenDarkenColor(col, amt) {

    amt=256-Math.floor(amt*5.12)
    const  usePound = col[0]=="#";
    if (usePound)
        col = col.slice(1);

    const num = parseInt(col,16);

    const rr=(num >> 16) + amt;
    const  bb = ((num >> 8) & 0x00FF) + amt;
    const  gg = (num & 0x0000FF) + amt;

    const r=rr>255?255:rr<0?0:rr;
    const b=bb>255?255:bb<0?0:bb;
    const g=gg>255?255:gg<0?0:gg;

    if ((g | (b << 8) | (r << 16))==0)
        return "#000000";

    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);

  }

使用

<div [ngStyle]="{color: color, 'background-color': lightenDarkenColor(color, 10)}">hello word</div>
<div [ngStyle]="{color: color, 'background-color': lightenDarkenColor(color, 90)}">hello word</div>

请参阅 stackblitz 中的演示