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
会影响整个元素及其所有后代,而 color
和 background-color
不会。
在您的简单示例中,纯黑色背景上不透明度降低的白色文本看起来是灰色的,因此视觉效果与将 color
从灰色更改为纯白色基本相同。
但在任何更复杂的示例中 – 例如,您段落的父级 div 的背景是图像而不是纯色,或者您在包含其他元素的元素上使用不透明度,而不仅仅是在文字上——你最终会得到真正透明的东西。这也可能意味着文本变得更难阅读。
所以答案不是关于是否有任何特定的行业标准,而是关于为工作选择正确的工具。如果您只是想让一些文本颜色变浅,请自行转换 color
。如果你想让事情变得透明,使用opacity
。
无论如何,这是理论,但在现实生活中,有时并不是那么一目了然。也许设计师会为您提供一个模型,其中 color: #C44242; opacity: 0.87
的文本位于 background-color: #B48927
的纯色背景之上。您可以计算该文本颜色的不透明版本是什么,但可能不值得您花时间这样做。如果你坚持不透明,世界就不会结束。
我很好奇是否有过渡颜色的行业标准,因为有多种方法可以实现所需的过渡效果。
有多种方法可以使特定颜色更亮或更暗,以向用户表明该元素难以处理。
例如,如果您有一个 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
会影响整个元素及其所有后代,而 color
和 background-color
不会。
在您的简单示例中,纯黑色背景上不透明度降低的白色文本看起来是灰色的,因此视觉效果与将 color
从灰色更改为纯白色基本相同。
但在任何更复杂的示例中 – 例如,您段落的父级 div 的背景是图像而不是纯色,或者您在包含其他元素的元素上使用不透明度,而不仅仅是在文字上——你最终会得到真正透明的东西。这也可能意味着文本变得更难阅读。
所以答案不是关于是否有任何特定的行业标准,而是关于为工作选择正确的工具。如果您只是想让一些文本颜色变浅,请自行转换 color
。如果你想让事情变得透明,使用opacity
。
无论如何,这是理论,但在现实生活中,有时并不是那么一目了然。也许设计师会为您提供一个模型,其中 color: #C44242; opacity: 0.87
的文本位于 background-color: #B48927
的纯色背景之上。您可以计算该文本颜色的不透明版本是什么,但可能不值得您花时间这样做。如果你坚持不透明,世界就不会结束。