Question

我想问你是否有人尝试过类似的事情。假设我有一个只包含div元素的DOM结构，其中父母和子女只能在最多1级。 E.g

<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插件或其他类型的解决方案实现。

感谢您的任何建议！

Answer 1

只需在边框中使用半透明颜色，并将边框设置为从内容框内开始。

＆＃13;

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;
}

＆＃13;

<div>WooHoo!</div>

＆＃13;

Answer 2

您请求的选项（某些混合模式）是可以实现的，但在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>

Answer 3

要创建颜色反转边框，请使用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>

Answer 4

在背景中使用混合颜色css选项但是可能很难将其调整到边框，因为背景图像和属性需要是相同的容器（它不是你的html）。

最简单的方法是为边框使用RGBA颜色：

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

Imo白色，50％的透明度就可以解决这个问题...只是一个非常非常轻的图像会给你带来问题，如 jsfiddle

边框颜色混合

4 个答案: