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透明度和背景繼承

回答

相關問題