Question

我有两个div，一个是.father，另一个是.child - 如下：

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

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

正如你所看到的，这个孩子不在父亲的内心（对不起，如果这看起来像狗，我唯一的例子就是眨眼）。我想做什么;就是当我给.father一个背景色让我们说＆＃34;背景色：＃000＆＃34;。我希望孩子继承黑色，但要让它更亮/更暗......

我尝试过以下操作：

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

我不知道这是否真实，我猜它是愚蠢的 - 但我需要分享我的所作所为。我也尝试使用CSS透明度，但这将应用于整个div ...如果div里面有文本怎么办？

所以例如，我用另一个div包装div .child并给该div一个黑色背景，然后将透明度应用于div .child - 但这也将对文本应用透明度！

如果我添加了一个，我该如何使该span继承其中div的颜色？并继承其大小。

Answer 1

我担心你不能用纯CSS做到这一点。当然，除非您使用rgba颜色使其透明。

然而，在SASS（和LESS）中有一个功能可以使颜色变暗/变亮。看一下这些函数的参考here。有关SASS / SCSS的更多信息：http://sass-lang.com/

Answer 2

您可以为子背景设置与父亲相同的颜色，并在其上设置半透明伪元素。

如果伪元素的背景为半透明白色，则背景颜色变浅;如果伪元素是半透明的黑色，则孩子会变暗。

.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);
}

在这个例子中，孩子的颜色变深，但是在悬停时会变成浅红色（如果基色是你想要的颜色，则效果相同

继承颜色，然后使其更暗/更亮

2 个答案:

fiddle