邊框顏色混合

我想問問你是否有人曾試圖實現類似的事情。比方說，我有一個只包含div元素的DOM結構，其中父母和子女只有最高1級。例如邊框顏色混合

<div style="background-image:url(foo.bar)"> 
    <div style="border:2px dashed black"> 
    </div> 
    <div style="border:2px dashed black"> 
    </div> 
    <div style="border:2px dashed black"> 
    </div> 
</div> 
<div style="background-image:url(foo1.bar)"> 
    <div style="border:2px dashed black"> 
    </div> 
    <div style="border:2px dashed black"> 
    </div> 
    <div style="border:2px dashed black"> 
    </div> 
</div>

注意背景之間的差異。比方說，第一個是明亮的，第二個是非常黑或黑的。

鬥爭是看到在黑暗的背景下的兒童的邊界，所以問題會。

是否有任何可能使邊界採取某種消極的顏色，它的父母背景？無論父母是否有照片或只有一種顏色作爲背景。從ps的某種多重混合模式？

我不在乎它是否可以用純CSS（如果可能的話）或jQuery插件或其他類型的解決方案。

謝謝你的任何建議！

來源

2015-09-17 jPO

使用固體或破折號編輯只有一個不是兩個 –

對不起，這是固定的，我的大腦可能是在輸入時關閉 – jPO

您請求的選項（某種混合模式）是可以實現的，但它在IE中不受支持。

如何使用它：

.base { 
 
    width: 500px; 
 
    height: 330px; 
 
    background: linear-gradient(45deg, black 15%, red, green, yellow, white 80%); 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 40px; 
 
} 
 

 
.test { 
 
    color: wheat; 
 
    font-size: 150px; 
 
    position: absolute; 
 
    left: 120px; 
 
    top: 118px; 
 
} 
 

 
.test:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: -20px; 
 
    top: -20px; 
 
    right: -20px; 
 
    bottom: -20px; 
 
    border-width: 20px; 
 
    border-color: white; 
 
    border-style: dashed; 
 
    mix-blend-mode: difference; 
 
}

<div class="base"></div> 
 
<div class="test">TEST</div>

來源

2015-09-17 17:01:31 vals

這太好了！而我並不在意ie。非常感謝！ – jPO

只需在邊框中使用半透明顏色，並將邊框設置爲從內容框內開始。

div { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    height: 362px; 
 
    width: 465px; 
 
    border: 20px solid rgba(0,0,0,0.5); 
 
    background: url(http://www.vanseodesign.com/blog/wp-content/uploads/2011/10/background-4.jpg) -20px -20px no-repeat; 
 
    margin: 10px; 
 
    text-align: center; 
 
}

<div>WooHoo!</div>

來源

2015-09-17 11:34:15 cvsguimaraes

這當然是非常好的例子。但採取黑色背景，你的邊界再次隱形。例如。 http://www.myokyawhtun.com/wp-content/uploads/2012/08/Mandalay-in-bw.jpg我不知道背景是什麼，所以它需要以某種方式靈活。但是謝謝你！ – jPO

@jPO我不明白。你的解決方案如何解決這個問題？ – cvsguimaraes

有在背景使用的混合色的CSS選擇，但它可能是非常困難的，以使其適應您的邊框爲背景圖像和性質必須是同一容器（其中這不是你的HTML）。

最簡單的方法是使用一個RGBA顏色爲你的邊界：

border-color: rgba(255, 255, 255, 0.5);

伊莫白在50％的透明度將使招...只是一個非常，非常亮的圖像會給你的問題在這jsfiddle

來源

2015-09-17 11:44:53

要創建一個顏色顛倒邊框mix-blend-mode: difference;

*{margin:0px;padding:0px;} 
 
#border{ 
 
    box-sizing:border-box; 
 
    width:300px;height:125px; 
 
    border:10px solid white; 
 
    position:absolute;top:0px; 
 
    mix-blend-mode:difference; 
 
}

<img src="http://goo.gl/KH4GBG"> 
 
<div id="border"></div>

來源

2015-09-17 18:53:20

邊框顏色混合

回答

相關問題