CSS中是否有办法采用CSS类定义的活动颜色，并加深或变亮要在另一个CSS类中使用的颜色？
开发场景：
我们有一个对话框，该对话框使用CSS样式，将其颜色定义为灰色阴影。在dailog中，我们的按钮使用2种不同的CSS样式来模拟按钮的按下状态。
可以使用按钮的CSS样式来使用对话框的颜色，但是可以使按钮的外观变暗或变亮。按钮的表面应比主要对话框的颜色浅，并且边框应使用较浅和较深的颜色，以显示3D按钮框架。
目标：
如果我们更改对话框的颜色，则按钮也将更改，而无需对用于渲染按钮上下状态的2种CSS样式进行任何代码更改。
我猜想有一种方法可以在JavaScript中执行此操作，但是CSS中有一种方法可以执行此操作吗？
您可以使用白色或黑色背景，其不透明度适合您希望其变亮的程度。不透明度使用起来有点困难（相对于其他更常见的 CSS 属性），因为它需要针对浏览器的特定技巧。根据这篇博客文章，以下（hacky）CSS 将跨浏览器工作以支持 50% 的不透明度：
.show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; }
顺便说一句，我回答了另一个与 Opacity 相关的 stackoverflow 问题，它包含一些 jQuery 代码示例，可用于以与浏览器无关的方式应用不透明度。如果上面的 CSS 让你感到恶心，你可以使用它。:-) 请注意，我在上面添加了“zoom:1”，以确保元素具有“布局”，这是应用不透明度的 IE 特定先决条件——这个问题也在上面链接的线程中进行了描述。
您还可以使用白色但具有您喜欢的透明度值的 PNG 图像。这需要 IE6 中常见的 PNG 修复解决方案。
这是一个代码示例，说明了可能的情况（以及一些限制）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.button { background-color:green; height:30px; width:100px; border: solid 1px red; color:#FFF; margin:20px; text-align:center; }
.buttonText { height:30px; width:100px; color:#FFF; margin:20px; text-align:center; }
.show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; }
.lighter { background-color:#CCCCCC; height:100%; width:100%; }
.darker { background-color:#000000; height:100%; width:100%;}
.whitetext {color:#fff; height:100%; width:100%; padding-top:6px;}
.moveText {margin-top:-52px; color:#fff; padding-top:6px; z-index: 10; }
</style>
</head>
<body>
<div class="button"></div>
<div class="buttonText moveText">Regular button</div>
<div class="button"><div class="show-50 lighter"></div></div>
<div class="buttonText moveText">Lighter button</div>
<div class="button"><div class="show-50 darker"></div></div>
<div class="buttonText moveText">Darker button</div>
</body>
</html>
在 IE8 上，文本看起来很完美（又名白色）。不幸的是，在 FF 和 Safari 上，文本会变暗。上面的技巧中，我将文本放入不同的 DIV 中，欺骗 IE 在不同颜色的背景上显示白色文本，但同样的技巧在 FF 和 Safari 上不起作用。我怀疑您可以发挥创意并找到改进方法，以便文本在所有浏览器中保持相同的颜色。真正的实现可能还希望使用绝对定位，而不是我的负面顶部利润黑客。