在 CSS 中是否有一种方法可以采用由 CSS 类定义的事件颜色，并使颜色变暗或变亮以在另一个 CSS 类中使用？
开发场景:
我们有一个使用 CSS 样式的对话框，该样式将其颜色定义为灰色阴影。在 dailog 中，我们的按钮使用 2 种不同的 CSS 样式来模拟按钮弹起和按钮按下状态。
是否可以让按钮的 CSS 样式使用对话框颜色，但让按钮外观变暗或变亮。按钮表面应比主对话框颜色浅，边框使用较浅和较深的颜色，以呈现 3D 按钮框架的外观。
目标:
如果我们更改对话框的颜色，按钮也会更改，而无需对用于呈现按钮的向上和向下状态的 2 个 CSS 样式进行任何代码更改。
我猜测在 JavaScript 中有一种方法可以执行此操作，但在 CSS 中是否有一种方法可以执行此操作？
最佳答案
您可以使用带有 opacity 的白色或黑色背景适合您想要减轻的量。不透明度使用起来有点挑战(相对于其他更常见的 CSS 属性)，因为它需要特定于浏览器的 hack。根据this blog post , 以下 (hacky) CSS 将跨浏览器工作以支持 50% 不透明度:
.show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; }
顺便说一句，我回答了another stackoverflow question related to Opacity ，它包含一些 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 的 hack 欺骗 IE 在不同颜色的背景上显示白色文本，但同样的技巧在 FF 和 Safari 上不起作用。我怀疑您可以发挥创意并找到对此进行改进的方法，以便文本在所有浏览器中保持相同的颜色。一个真正的实现可能还想使用绝对定位而不是我的负面最高利润黑客。
关于javascript - 从父级继承颜色并在 CSS 中执行颜色着色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1731015/