CSS 过渡：不透明度与更改背景颜色？

Question

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

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

例如，如果您有一个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;
}

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

Answer 1

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

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

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

因此，答案不在于有任何特定的行业标准，而在于为工作选择合适的工具。如果您只是想让某些文本颜色变浅，请转换 color 本身。如果你想让事情变得透明，请使用opacity。

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