如何使用JavaScript在CSS网格布局中随着行的下降而增量调整每行的不透明度值

我正试图找出一种方法，以我的布局中的每一行为目标，并随着行的下降逐渐变暗。通过变暗，我在更改不透明度值的上下文中引用。对于我当前的实现，什么是最好的方法。任何帮助都将不胜感激

为了澄清，最上面的一行将是最轻的不透明度/rgba值，而最下面的一行将是全色

我的代码

const container=document.getElementById（“容器”）；
常量颜色=[
"#443737",
"#272121",
“#ff0000”，
“#ff4d00”，
“#1a1a2e”，
“#16213e”，
“#0f3460”，
“#e94560”，
“#d789d7”，
“#9d65c9”，
“#5d54a4”，
“#2a3d66”，
“#d54062”，
“#ffa36c”，
“#ebdc87”，
"#799351",
];
函数createGrid（行、列、列颜色）{
container.style.setProperty（“--grid rows”，rows）；
container.style.setProperty（“--grid cols”，cols）；
对于（i=0；i
#容器{
显示：网格；
网格模板行：重复（变量（--网格行），1fr）；
网格模板列：重复（var（--grid cols），1fr）；
}
.表格项目{
填充：1em；
边框：1px实心#ddd；
文本对齐：居中；
高度：100px；
宽度：100px；
}
这是我建议编辑的代码：

颜色。根据每种颜色的“强度”（RGB）之和对
s进行排序


const container=document.getElementById（“容器”）；
常量颜色=[
“443737”、“272121”、“ff0000”、“ff4d00”，
“#1a1a2e”、“#16213e”、“#0f3460”、“#e94560”，
“d789d7”、“9d65c9”、“5d54a4”、“2a3d66”，
“d54062”、“ffa36c”、“ebdc87”、“799351”
];
颜色。排序（（a，b）=>
parseInt（a.slice（1,3,16）+parseInt（a.slice（3,5,16）+parseInt（a.slice（5,7,16））
>
parseInt（b.slice（1,3），16）+parseInt（b.slice（3,5），16）+parseInt（b.slice（5,7），16）
?-1
:1
);
函数createGrid（行、列、列颜色）{
container.style.setProperty（“--grid rows”，rows）；
container.style.setProperty（“--grid cols”，cols）；
对于（i=0；i
#容器{
显示：网格；
网格模板行：重复（变量（--网格行），1fr）；
网格模板列：重复（var（--grid cols），1fr）；
}
.表格项目{
填充：1em；
边框：1px实心#ddd；
文本对齐：居中；
高度：100px；
宽度：100px；
}
您可以在创建每个单元格时设置其不透明度，就像设置背景色一样

假设您希望不透明度的增加沿行均匀分布，并且假设您不希望第一行完全不可见，将循环更改为类似以下内容即可：

  for (row = 0; row < rows; row++) {
    for (col = 0; col < cols; col++) {
    const square = document.createElement("div");
    square.style.backgroundColor = columnColors[col];
    square.style.opacity=(row+1)/(rows+1);//spread the increase in opacity evenly over the rows
    container.appendChild(square).className = "grid-item";
    }
  }

for（行=0；行<行；行++）{
for（col=0；col

我把它分成了两个循环，以便更清楚地说明发生了什么。
你能再解释一下“变暗”是什么意思吗（有些方块已经变暗了，所以我不确定你想要什么效果）？这仅仅是为了视觉效果（也许可以通过叠加来实现），还是因为方块中的背景颜色发生了变化？谢谢您的回复。更改不透明度/rgba值。因此，从最上面一行的最浅不透明度开始，然后随着它的下降而变暗，最后一行是完整的纯色。替换
square.style.backgroundColor=columnColors[i%cols]带有
square.style.backgroundColor=列颜色[数学地板（i/cols）]对于初学者。将
colors
设置为从亮到暗…颜色从亮到暗的大致排序：
colors.sort（（a，b）=>parseInt（a.slice（1,3,16）+parseInt（a.slice（3,5,16）+parseInt（a.slice（5,7,16）+parseInt（b.slice（1,3,16）+parseInt（b.slice（3,5,16）+parseInt（b.slice（5,7,16）？-1:1）
这是否适用于更改不透明度值？