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。

无论如何，这是理论，但在现实生活中有时并非如此。也许设计师为您提供了一个color: #C44242; opacity: 0.87文本的实物模型，其文本为background-color: #B48927。您可以计算出该文本颜色的不透明版本，但是这样做可能不值得。如果您坚持不透明，世界将不会终结。

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

1 个答案: