Css 根据其父背景颜色将颜色按钮背景动态更改为较暗

我正在为不同的产品创建一个具有不同背景颜色的页面，并将有一个按钮重定向到其他产品

我想按钮的背景应该比背景颜色暗

.a{
背景色：#cc99ff；
}
.b{
背景色：#9d0059；
}
c{
背景色：#cc3f10；
}
钮扣{
背景色：透明；
边框颜色：白色；
颜色：白色
}

试验
试验
测试

改变

背景色：透明至<代码>背景色：rgba（0,0,0,0.4）

您可以相应地调整不透明度


.a{
背景色：#309549；
}
.b{
背景色：#9d0059；
}
c{
背景色：#cc3f10；
}
钮扣{
背景色：rgba（0,0,0,0.4）；/*已更改*/
边框颜色：白色；
颜色：白色
}

试验
试验
测试
改变
背景色：透明至<代码>背景色：rgba（0,0,0,0.4）

您可以相应地调整不透明度


.a{
背景色：#309549；
}
.b{
背景色：#9d0059；
}
c{
背景色：#cc3f10；
}
钮扣{
背景色：rgba（0,0,0,0.4）；/*已更改*/
边框颜色：白色；
颜色：白色
}

试验
试验
这里是另一种方法，使用CSS变量、calc（）和rgba颜色


：根目录{
--红干线：28；
--绿色干线：150；
--蓝色干线：130；
}
.集装箱{
背景色：
rgb(
var（--红色主），
var（--绿色主），
var（--蓝色主）
);
}
.深色背景{
背景色：
rgb(
计算（var（--红色干管）-40），
计算（var（--绿色干管）-20），
计算（var（--蓝色干管）-20）
);
}
/*只是为了让事情看起来更好，与你的问题无关*/
身体{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
}
* {  
填充：15px；
}

你好，世界！
我的背景自动变暗
这里是另一种方法，使用CSS变量、calc（）和rgba颜色


：根目录{
--红干线：28；
--绿色干线：150；
--蓝色干线：130；
}
.集装箱{
背景色：
rgb(
var（--红色主），
var（--绿色主），
var（--蓝色主）
);
}
.深色背景{
背景色：
rgb(
计算（var（--红色干管）-40），
计算（var（--绿色干管）-20），
计算（var（--蓝色干管）-20）
);
}
/*只是为了让事情看起来更好，与你的问题无关*/
身体{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
}
* {  
填充：15px；
}

你好，世界！
我的背景自动变暗
将按钮设置为半透明黑色将按钮设置为半透明黑色或如果您希望按钮更亮，可以使用背面，其仍然提供透明背景，但带有白色覆盖层<代码>背景：rgba（255,255,255,0.3）。或者，如果您希望按钮更亮，可以使用反向按钮，它仍然提供透明背景，但带有白色覆盖层<代码>背景：rgba（255,255,255,0.3）。