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

Question

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

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

例如，如果您有一个p标签，并且想要添加悬停在效果上，则可以：

.HTML

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

使用 opacity 的 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;
}

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

Answer 1

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

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

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

因此，答案不是关于有任何特定的行业标准，而是关于为工作选择合适的工具。如果您只想使某些文本的颜色较浅，请color本身进行过渡。如果要使内容透明化，请使用opacity。

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