实现效果:
代码:
<div class="setCardItemColorBefore" : />
.setCardItemColorBefore {
// content: '';
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
height: 128px;
width: 30px;
}
// 根据接口反回的颜色值设置背景色
const getColor = hex => ({
backgroundImage: `linear-gradient(to right,${hexToRgba(
hex,
'0.15'
)},${hexToRgba(hex, '0')}`
})
// 16进制转rgba
const hexToRgba = (hex, opacity) => {
if (!hex) hex = '#ededed'
const rgba =
'rgba(' +
parseInt('0x' + hex.slice(1, 3)) +
',' +
parseInt('0x' + hex.slice(3, 5)) +
',' +
parseInt('0x' + hex.slice(5, 7)) +
',' +
(opacity || '1') +
')'
return rgba
}
这地方有很多坑,反正就按照上面的写法肯定是好用的。
核心的坑在于渐变色linear-gradient这块,试了好久才试出来这个办法。