div透明度和背景继承

Question

我几乎可以肯定，这是不可能的，但我不得不问。所以我有3个div。一个是主包装，另一个是右侧的绿色，第三个是小的。所以我想要的是让那个小div一直透明到包装器。所以它没有绿色背景，而是笑脸。不要认为这是可能的，但话又说回来，我可能错了。我知道我可以将绿色div分成4个块并且＆＃34;包裹＆＃34;透明的那个，但是因为我在小的那个上有border radius而无法工作。

更新： http://jsfiddle.net/9hLf8mcu/3/

Answer 1

只需将此background: url('http://superlifestylecoach.typepad.com/.a/6a0120a9506f8e970b01348158e534970c-pi'); background-position:center right;添加到您的.same_as_blue {

即可

DEMO

Answer 2

纯css是不可能的，因为你需要让绿色div也是透明的，这显然不是。解决方法是让您的小方块与您想要的背景相同，然后使用background-position将图像移动到您想要的位置

.blue {
    width: 200px;
    height: 200px;
}

.blue,
.same_as_blue {
    background: url(http://lorempixel.com/200/200/) left top no-repeat;
}

.green {
    width: 50px;
    height: 100%;
    background: green;
    float: right    
}

.same_as_blue {
    width: 40px;
    height: 40px;
    background-position: -150px top;
}

<div class="blue">
    <div class="green">
        <div class="same_as_blue"></div>
    </div>
</div>

Your fiddle updated - 如果您移动background:green，您会看到小图片很好地匹配

Answer 3

我非常喜欢安东尼使用重复背景的答案。另一种解决方案是查看CSS的clip和mask功能。