CSS 过渡:不透明度与更改背景颜色?

CSS Transition: Opacity vs changing Background-Color?

我很好奇是否有过渡颜色的行业标准,因为有多种方法可以实现所需的过渡效果。

有多种方法可以使特定颜色更亮或更暗,以向用户表明该元素难以处理。

例如,如果您有一个 p 标签并且您想要添加悬停效果,您可以:

HTML

<div><p> P tag text </p></div>

CSS v1 使用不透明度

div {
background-color:black;
}

p {
color: white;
opacity: 0.8;
transition: opacity 0.2s ease-in-out;
}

p:hover {
opacity: 1;
}

CSS v2 使用颜色

div {
background-color:black;
}

p {
color: #ccc;
transition: color 0.2s ease-in-out;
}

p:hover {
color: #fff;
}

据我所知,这两种方法提供的结果相似,但我仍然很好奇是否有正确的方法来做这种事情。

您应该意识到的主要事情是 opacity 会影响整个元素及其所有后代,而 colorbackground-color 不会。

在您的简单示例中,纯黑色背景上不透明度降低的白色文本看起来是灰色的,因此视觉效果与将 color 从灰色更改为纯白色基本相同。

但在任何更复杂的示例中 – 例如,您段落的父级 div 的背景是图像而不是纯色,或者您在包含其他元素的元素上使用不透明度,而不仅仅是在文字上——你最终会得到真正透明的东西。这也可能意味着文本变得更难阅读。

所以答案不是关于是否有任何特定的行业标准,而是关于为工作选择正确的工具。如果您只是想让一些文本颜色变浅,请自行转换 color。如果你想让事情变得透明,使用opacity

无论如何,这是理论,但在现实生活中,有时并不是那么一目了然。也许设计师会为您提供一个模型,其中 color: #C44242; opacity: 0.87 的文本位于 background-color: #B48927 的纯色背景之上。您可以计算该文本颜色的不透明版本是什么,但可能不值得您花时间这样做。如果你坚持不透明,世界就不会结束。