如何在不更改边框颜色的情况下更改边框的不透明度

时间:2019-04-26 05:40:56

标签: html css sass

当使用SCSS禁用输入边框时,我将更改其不透明度。但是边框颜色来自变量:

$borderColor: #5985dc;

.my-input {
  border: 1px solid $borderColor;
}
.my-input:disabled {
  border-color: ???;
}

...还是有什么方法可以将颜色更改为半透明版本?

1 个答案:

答案 0 :(得分:7)

您可以使用Sass的rgba()函数。它可以采用十六进制颜色值和不透明度值,然后将其转换为RGBA:

$borderColor: #5985dc;

.my-input {
  border: 1px solid $borderColor;
}
.my-input:disabled {
  border-color: rgba($borderColor, 0.5);
}