我想在Ionic中动态应用深色调背景 . 为此，我写了下面的代码 . 现在我已经完成了他的使用CSS .
.event-list .bg{
background:#eee;
padding:5px;
}
.grid .event-list:first-child .bg{
background: #2aac97
}
.grid .event-list:nth-child(2) .bg{
background: #29a4ac
}
.grid .event-list:nth-child(3) .bg{
background: #2a92ac
}
.grid .event-list:nth-child(4) .bg{
background: #2a7dac
}
.grid .event-list:nth-child(5) .bg{
background: #2967ac
}
.grid .event-list:nth-child(6) .bg{
background: #2a55ac
}
<div class="grid">
<div class="event-list row">
<div class="bg">Lorem Ipsum</div>
</div>
<div class="event-list row">
<div class="bg">Lorem Ipsum</div>
</div>
<div class="event-list row">
<div class="bg">Lorem Ipsum</div>
</div>
<div class="event-list row">
<div class="bg">Lorem Ipsum</div>
</div>
<div class="event-list row">
<div class="bg">Lorem Ipsum</div>
</div>
</div>
我的内容来自后端 . 我该怎么做呢我是Ionic的新手，有人帮助我 . 或者请帮我在我的.ts文件中写下这段代码
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}
// apply color to class bg
var grid = document.getElementsByClassName('grid'),
elements = grid[0].children,
i;
for (i = 0; i < elements.length; i += 1) {
// do stuff with elements[i] here
var color = ColorLuminance("#2aac97", -('0.'+i));
elements[i].children[0].style.background=color;
}