Css 是否可以只更改颜色的alpha透明度部分？_Css

Css 是否可以只更改颜色的alpha透明度部分？

css

Css 是否可以只更改颜色的alpha透明度部分？,css,Css,我有一些css如下： a transition: all 0.4s ease-out border-bottom: 1px solid rgba(256, 256, 256, 0) a:hover border-bottom: 1px solid rgba(256, 256, 256, 1) 这使我的按钮上有一条淡入的下划线。我希望下划线始终使用与元素其余部分相同的颜色，例如使用 color: rgb(256, 256, 256) 我想要这个设置

我有一些css如下：

   a
      transition: all 0.4s ease-out
      border-bottom: 1px solid rgba(256, 256, 256, 0)
   a:hover
     border-bottom: 1px solid rgba(256, 256, 256, 1)

这使我的按钮上有一条淡入的下划线。我希望下划线始终使用与元素其余部分相同的颜色，例如使用

color: rgb(256, 256, 256)

我想要这个设置，这样我就不必每次添加边框时都重新指定颜色。我不能使用不透明度，因为元素中有东西。

颜色RGB256256256未定义

RGB颜色空间从0到255 因此，使用RGBA255255,0和RGBA255255,1应该可以工作

身体{ 背景色：000； } a{ 过渡：所有0.4s缓解；边框底部：1px实心rgba255、255、255、0； } a:悬停{ 边框底部：1px实心rgba255、255、255、1； } 颜色RGB256256256未定义

RGB颜色空间从0到255 因此，使用RGBA255255,0和RGBA255255,1应该可以工作

身体{ 背景色：000； } a{ 过渡：所有0.4s缓解；边框底部：1px实心rgba255、255、255、0； } a:悬停{ 边框底部：1px实心rgba255、255、255、1； }

您可能希望尝试使用伪元素添加边框，然后可以使用不透明度分离颜色和透明度，currentColor会自动与链接颜色匹配：

a{
display:inline-block;
}

a::after{
border-bottom:1px solid currentColor;
opacity:0;
content:"";
display:inline-block;
width:100%
}

您可能希望尝试使用伪元素添加边框，然后可以使用不透明度分离颜色和透明度，currentColor会自动与链接颜色匹配：

a{
display:inline-block;
}

a::after{
border-bottom:1px solid currentColor;
opacity:0;
content:"";
display:inline-block;
width:100%
}

如果将其应用于：：after伪元素，则可以使用不透明度：

身体{ 背景色：000； } a{ 显示：内联块；光标：指针； } a:nth-of-type1{ 颜色：rgba255,0,0,1； } a:nth-of-type2{ 颜色：RGBA0255,0,1； } a:nth-of-type3{ 颜色：RGBA127191255,1； } a:之后{ 内容：；显示：块；高度：1px；背景色：当前颜色；不透明度：0；过渡：所有0.4s缓解； } a:悬停：：之后{ 不透明度：1； } 快速棕色狐狸跳了过去懒惰的狗。如果将不透明度应用于：：after伪元素，则可以使用不透明度：

懒惰的狗。我给出的另一个答案使用：：after伪元素，用于单行的内联链接

对于多行链接，这个答案使用了类似的方法，但这一次，：：after伪元素覆盖了整个a元素，而不是简单地定位在它的底部，并且有一个交替重复的行背景-这最终看起来像是a元素中每行的一条下划线：

身体{ 宽度：400px；背景色：rgba0,0,0,1； } a{ 位置：相对位置；显示：内联块；光标：指针；字体大小：16px；线高：20px； } a:nth-of-type1{ 颜色：rgba255,0,0,1； } a:nth-of-type2{ 颜色：RGBA0255,0,1； } a:nth-of-type3{ 颜色：RGBA127191255,1； } a:之后{ 内容：；位置：绝对位置；排名：0；左：0； z指数：12；显示：块；宽度：400px；高度：100px；背景：向底部重复线性渐变，rgba0，0，0，0，rgba0，0，0 19px，currentColor 19px，currentColor 20px；不透明度：0；过渡：所有0.4s缓解； } a:悬停：：之后{ 不透明度：1； } 快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色快速棕色狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过狐狸跳过

懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗我给出的另一个答案使用：：after伪元素，用于单行上的内联链接

懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。懒狗。不确定我是否理解正确，但这不是SASS变量发挥作用的地方吗？例如：$maincolor:rgba255255255，1色：$maincolor；边框：$maincolor.5；不确定我是否理解正确，但这不是SASS变量发挥作用的地方吗？例如：$maincolor:rgba255255255，1色：$maincolor；边框：$maincolor.5；这是伟大的，然而，在我的解决方案中，a标签跨越多行，你能让这个解决方案以某种方式工作吗？我已经调整了我的原始答案上面和张贴新的答案-多行链接-下面。我认为这需要一个不同的答案，因为它以不同的方式处理不同的情况。这很好，但是，在我的解决方案中，a标签跨越多行，你能让这个解决方案以某种方式工作吗？我在上面调整了我的原始答案，并在下面发布了新的答案-多行链接。我认为这需要一个不同的答案，因为它以不同的方式处理不同的情况。