减轻父母的（未知）背景颜色在孩子 [英] Lighten parent's (unknown) background-color in child

问题描述

有没有办法在较少或（一般css3）访问父的 background-color 而不知道它？

像：

  .child-class {
 background-color：lighten（parent-background-color ，30％）; 
} 
  

更少的变量将是显而易见的方法，但在这种情况下，因为它可以动态样式。

任何人在她的小提示框中都有一些东西帮助？

解决方案

编辑：看看ScottS的答案，一个聪明的解决方案，可能是你需要的。 >

这不能在纯CSS。原因是这些类型的引用可能导致循环的情况。或者DOM必须循环多次以确定最终值的情况。这两种情况都是css总是避免的。

现在，如果你的主要目标是定义一个pallette类型，并且所有的颜色一起工作，到SASS或LESS等CSS扩展工具。他们可以让你定义颜色和更改它们，并做其他有用的比较的东西。看看这些工具，如果你想要这样的灵活性。他们不能像你这样直接比较，因为他们只是减少到css到最后。

这可以很容易地使用JavaScript，甚至更容易使用jQuery 。我不会混淆这个答案与JavaScript / jQuery代码，当它可能不是你需要的。

Is there a way in less or (css3 in general) to access parent's background-color without knowing it?

Something like:

.child-class {
    background-color: lighten(parent-background-color, 30%);
}

A less variable would be the obvious approach but in this case I simply don't know the parent's background-color as it can be dynamically styled.

Anybody got something in her trick box to help out?

解决方案

EDIT: Have a look at ScottS's answer for a clever solution that is probably what you need.

That cannot be done in pure css. The reason is that these types of references could lead to 'circular' situations. Or situations where the DOM has to be looped over multiple times to determine the final value. Both these situations are something css always avoids.

Now, if your main goal is to define a 'pallette' of sorts and have all your colors work together, you should look into CSS expansion tools like "SASS" or "LESS". They could let you define colors and change them and do other useful comparison things. Have a look at those tools if you want such flexibility. They cannot however, do direct comparison like you ask, since they just reduce to css in the end.

This can easily be done using JavaScript, and even more easily using jQuery. I wont clutter this answer with JavaScript/jQuery code when it probably isn't what you need.

这篇关于减轻父母的（未知）背景颜色在孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！