使用CSS混合2個元素的背景顏色

我需要使用CSS混合2個元素的背景顏色我一直在擺弄background-blend-mode:multiply，但只有在同一元素中具有2種顏色時才起作用。使用CSS混合2個元素的背景顏色

我需要實現這樣的事情 -

enter image description here

我一直在尋找了很多，但一直沒能弄明白。我找到的最有幫助的資源是http://blogs.adobe.com/webplatform/2012/07/17/new-blending-features-in-css/，它顯示瞭如何使用Canvas進行操作。使用CSS可以做同樣的事情嗎？

編輯

圓圈上面只是表明我需要什麼樣的一個例子。正如我所提到的，我一直在尋找2種不同元素的混合顏色。我創建了一個我需要混合的實際形狀的小提琴。 http://jsfiddle.net/fmgfsr4o/2/

來源

2014-08-29 Kshitiz Shankar

我發現[這個問題]（http://stackoverflow.com/questions/23986063/using-css-blend-mode-on-dom-element-above-the-element-with-the-background-image）這可能有幫助。 – 2014-08-29 10:56:05

你嘗試在同一個元素上使用多個背景嗎？像這樣：第一個背景是左邊的紅色圓圈，第二個背景是右邊的綠色圓圈。我認爲你可以用純CSS來繪製它，也許可以用一些漸變或類似的東西。你也可以嘗試使用CSS僞元素（'：after'和'：before'） – pomeh 2014-08-29 10:56:07

基本上......不。混合模式尚未在CSS中提供，並且沒有CSS替代方案。儘管你可能**能夠在JS中做些事情。 – 2014-08-29 11:26:04

您可以結合多個CSS背景徑向漸變來達到這種效果：

CSS

div { 
    /* adjust the width of the container to adjust circle's 
    overlap size and shape */ 
    width: 80px; 
    height: 50px; 
    /* for debug purpose only */ 
    border: solid blue 1px; 

    background: 
    /* draw the red circle */ 
    radial-gradient(red 0%, red 70%, transparent 70%, transparent 100%) 0 0, 
    /* draw the green circle */ 
    radial-gradient(green 0%, green 70%, transparent 70%, transparent 100%) 0 0; 
    /* the red on the left, the green on the right */ 
    background-position: top left, top right; 

    /* you can make then bigger or smaller */ 
    /* but you have to change width size above too */ 
    background-size: 50px 50px; 
    /* You want both circles to appears once only */ 
    background-repeat: no-repeat; 

    /* you can try with other values too */ 
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode */ 
    background-blend-mode: multiply; 
}

HTML

<div></div>

我已經做了的jsfiddle您可以嘗試：http://jsfiddle.net/pomeh/07nLpwwj/

這是我開始使用火狐31的結果：

circles

即使瀏覽器支持似乎「正確」（見這裏http://caniuse.com/#feat=css-backgroundblendmode），請請注意0屬性現在具有候選推薦狀態，所以在使用它時要小心（感謝@Paulie_D指出了這一點）。

來源

2014-08-29 12:14:39 pomeh

正如我所提到的，我需要合併「2個元素」的背景顏色圈子只是一個例子，我的形狀有點複雜，需要使用不同的HTML元素創建（例如，考慮2個重疊的菱形形狀）。有沒有可能用CSS做到這一點？ – 2014-09-01 09:56:53

@KshitizShankar我不知道這是可能的，'背景混合模式'只適用於一個元素。請更新你的問題，並在你需要的**完全**上添加細節**：我的答案似乎與你的問題一致，但你的問題並不符合你真正需要的東西，所以你永遠不會找到有用的答案。 – pomeh 2014-09-01 10:29:21

我編輯了這個問題，並附上了我需要混合的實際形狀的小提琴。我不確定我是否可以使用CSS來實現它.. – 2014-09-01 11:00:54

試試這個純粹的CSS3，但你需要弄清楚如何定位圓圈。

html { 
height: 100%; 
background: 
    repeating-radial-gradient(
     circle, 
     transparent, 
     transparent 3.5em, 
     tomato 1em, 
     tomato 4.5em 
    ), 
    repeating-radial-gradient(
     circle, 
     transparent, 
     transparent 3.5em, 
     dodgerblue 3.5em, 
     dodgerblue 4.5em 
    ); 

background-blend-mode: multiply; 
background-size: 10em 10em; 
background-position: 
    0 0, 
    5em 5em, 
    10em 5em; 
}

JSFiddle

來源

2014-08-29 12:02:28

我正在尋找一個答案，用CSS來做。我已經知道我可以使用JS和Canvas來實現它 – 2014-08-29 12:08:42

DyspraxicDesigner你的編輯對你的響應是一個太激進的改變，它完全改變了你的響應內容（從JavaScript解決方案到CSS的一個）。將來請注意，因爲@KshitizShankar現在必須重新考慮你的迴應。如果您真的想做出如此徹底的改變，請發佈一個新答案，然後刪除第一個答案。謝謝。 – pomeh 2014-08-30 09:41:00

使用CSS混合2個元素的背景顏色

回答

相關問題