javascript - Inherit colour and then make it darkerbrighter - Stack Overflow

admin管理员组

文章数量:1317898

I have two div's one is .father and the other one is .child - as follows:

<div class="father">
  <p></p>
</div>

<div class="child">
  <p></p>
</div>

As you can see, the child is not inside the father (sorry if this seems doggy, the only example blinked to me). What I am trying to do; is when I give the .father a background colour lets say "background-color: #000". I want the child to inherit the colour black BUT make it brighter/darker...

I have tried to do the following:

.child {
  background-color: -20%;
}

I don't know if that is a real way, I guess it's stupid - but I need to share what I did. I have also tried to do it using CSS transparency but that will be applied to the whole div... what if the div has text inside it?

So for example, I wrap the div .child with another div and give that div a black background, then apply transparency to the div .child - but this will apply transparency to the text as well!

If I have added a around the how can I make that span inherit the colour of the div inside it? and inherit its size as well.

I have two div's one is .father and the other one is .child - as follows:

<div class="father">
  <p></p>
</div>

<div class="child">
  <p></p>
</div>

As you can see, the child is not inside the father (sorry if this seems doggy, the only example blinked to me). What I am trying to do; is when I give the .father a background colour lets say "background-color: #000". I want the child to inherit the colour black BUT make it brighter/darker...

I have tried to do the following:

.child {
  background-color: -20%;
}

I don't know if that is a real way, I guess it's stupid - but I need to share what I did. I have also tried to do it using CSS transparency but that will be applied to the whole div... what if the div has text inside it?

So for example, I wrap the div .child with another div and give that div a black background, then apply transparency to the div .child - but this will apply transparency to the text as well!

If I have added a around the how can I make that span inherit the colour of the div inside it? and inherit its size as well.

• javascript
• html
• css

Share Improve this question Follow edited Mar 11, 2014 at 12:30 Leo asked Mar 11, 2014 at 12:18 LeoLeo 97722 gold badges1414 silver badges3737 bronze badges 7

• 2 This is going to be hard, and paring colors like that is a lot harder than you seem to think. You should consider rethinking this and just hardcoding the colors. – adeneo Commented Mar 11, 2014 at 12:19
• 1 Look into using a pre-processor such as LESS. This bees easy then. – Curtis Commented Mar 11, 2014 at 12:20
• Does this work? stackoverflow./questions/1625681/… – Jongware Commented Mar 11, 2014 at 12:21
• But what about my second idea? mon guys, it seems going to work with some help! – Leo Commented Mar 11, 2014 at 12:21
• 1 I'm looking for something similar, but for text-colors. To make links (a-tags) a little darker than the text – BlueCacti Commented Mar 11, 2014 at 12:21

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

I'm afraid you cannot do that in pure CSS. Unless of course you work with rgba colors to make it transparent.

There is however a function in SASS (and LESS) that allows to darken/lighten colors. Take a look at these function's reference here. More information about SASS/SCSS: http://sass-lang./

You can set for the child background the same color that for the father, and set a semitransparent pseudo element over it.

If the background of the pseudo element is semi-transparent white, the background-color gets lighter; if the pseudo element is semitransparent black, the child gets darker.

.father, .child { 
    background-color: red;
}

.child {
    position: relative;
}

.child:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0,0.2);
}

.child:hover:after {
    background-color: rgba(255,255,255,0.3);
}

In this example, the child gets darker red, but turns to lighter red when hovered (and works the same if the base color is whatever you want

fiddle

本文标签： javascriptInherit colour and then make it darkerbrighterStack Overflow