CSS过渡不透明度不影响rgba颜色

为什么

不透明度

转换对

悬停

没有影响，如果我只是在文本

类

中将不透明度单独设置为

.4

，它可以工作，但与

rgba不透明度

不工作

ul{
列表样式：无
}
李{
垫底：15px；
}
.文本{
颜色：rgba（13,19,13,4）；//这里是初始不透明度。4
过渡：三次贝塞尔（.4,1,2,1）；
}
.文本：悬停{
不透明度：.9
}

JS-Bin

项目
项目
项目
项目
项目

这是解决方案，在.text类中，为不透明度提供单独的属性


ul{
列表样式：无
}
李{
垫底：15px；
}
.文本{
颜色：rgba（13,19,13,0.4）；
过渡：三次贝塞尔（.4,1,2,1）；
}
.文本：悬停{
光标：指针；
颜色：rgba（13,19,13,0.9）；
}

JS-Bin

项目
项目
项目
项目
项目

仅使用
不透明度
而不是
颜色
不透明度


ul{
列表样式：无
}
李{
垫底：15px；
}
.文本{
不透明度：.4；
过渡：三次贝塞尔（.4,1,2,1）；
}
.文本：悬停{
不透明度：.9
}

JS-Bin


项目

项目

项目

项目

项目

一旦更改了“颜色”属性中的不透明度，就需要为过渡设置
颜色


ul{
列表样式：无
}
李{
垫底：15px；
字号：2em；
}
.文本{
颜色：rgba（13,19,13,4）；
过渡：颜色2s三次贝塞尔（.4,1,2,1）；
}
.文本：悬停{
颜色：rgba（13119,13,9）；
}

JS-Bin







在过渡和
上使用
颜色属性：悬停
使用
颜色：rgba（13,19,13,0.9）
ul{
列表样式：无
}
李{
垫底：15px；
}
.文本{
颜色：rgba（13,19,13,0.4）；
过渡：颜色2s三次贝塞尔（.4,1,2,1）；
}
.文本：悬停{
颜色：rgba（13,19,13,0.9）；
}

JS-Bin

项目
项目
项目
项目
项目

这个元素是什么意思
在颜色不透明度和不透明度之间有区别，你要混合它们改变实际rgba值的不透明度/alpha…谢谢你的回答，但我要说的是，我已经在我的问题中提过了，我想知道为什么它不能使用rgba不透明度。我已经编辑了我的解决方案。如果您在文本类中设置颜色不透明度，并在.hover状态中更改元素不透明度，我将不起作用。因此，您必须使用上面我的代码片段中显示的任何方法。如果您的演示不起作用，我在悬停时没有看到任何过渡效果。@jsduniya抱歉，我的坏不记得在颜色rgba悬停情况下将不透明度过渡更改为颜色，请更新我的ans检查