边框颜色混合

我想问问你是否有人曾试图实现类似的事情。比方说，我有一个只包含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

边框颜色混合

回答

相关问题