div透明度和背景继承

我几乎可以肯定，这是不可能创建，但我不得不问。所以我有这3个div。一个是主包装，另一个是右侧的绿色包装，第三个是小包装。所以我喜欢什么让这个小的div一直透明到包装。所以它没有绿色背景，但是有笑脸的一个。不要认为这是可能的，但是再一次，我可能是错的。我知道我可以将绿色分区分成4个区块并“包装”透明区域，但这不起作用，因为我在小区域有border radius。div透明度和背景继承

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

来源

2015-03-02 zmuci

我在想，知道这是**假设**看起来像什么，其背后的目的可能比描述更有用。你有设计形象吗？ – 2015-03-02 15:01:54

正如@Paulie_D所说，一幅图像会有很大的帮助。另外，如果你有一个更完整的代码示例（你提到了边界半径，但是我看不到你的小提琴中的边界半径） – 2015-03-02 15:03:04

哇，我贴错了小提琴...好吧，再次重做，等等。 – zmuci 2015-03-02 15:04:30

这是不可能的纯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你会看到小图像相匹配很好

来源

2015-03-02 15:10:36 Pete

是的，这是一个好主意，但它不会工作时，窗口正在调整大小，对吧？由于我需要的图像将是100％而不是固定的像素数量。 – zmuci 2015-03-02 15:13:21

猜猜这是我能得到的最好的，谢谢。 :) – zmuci 2015-03-02 15:20:59

啊对，你从来没有说过它是敏感的。你可以做出反应，你只需要一些额外的div。我会去看看能不能给你看一个更新的小提琴 – Pete 2015-03-02 15:23:07

enter image description here

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

DEMO

来源

2015-03-02 15:17:07

是的，这可以工作，给你upvote，但接受皮特的答案，因为他先写它，谢谢。 – zmuci 2015-03-02 15:20:38

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

来源

2015-03-02 15:21:39 Sam

div透明度和背景继承

回答

相关问题