我尝试在ngStyle中使用lighten属性,但它不起作用。
我的组件中有一个颜色变量,我想像这样使用它:
<div [ngStyle]="{color: schedule.group.color, background: 'lighten(' + schedule.group.color + ', 50%)'}">
有人能给一些想法吗?
/**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>
上述(已回答)函数有时会返回空白,然后我找到了解决方案:
hexToRgbNew(hex: any, opacity: any): string {
let h = hex.replace('#', '');
h = h.match(new RegExp('(.{' + h.length / 3 + '})', 'g'));
for (let i = 0; i < h.length; i++) {
h[i] = parseInt(h[i].length === 1 ? h[i] + h[i] : h[i], 16);
}
if (typeof opacity !== 'undefined') { h.push(opacity); }
return 'rgba(' + h.join(',') + ')';
}
schedule.group.color
的值是多少?您不能在行内使用 CSS 函数。您可以直接传递带有 50% 不透明度的 RGBA 值(或在组件中实现 lighten 方法以计算正确的不透明度)。 - marcel