Question

我们说我有蓝白相间的背景。我希望我的文字在背景为白色时为黑色，在背景为蓝色时为白色。

我试过了：

mix-blend-mode: difference;

它适用于白色（给我黑色文字）。但它给了我黄色文本。

以下是我现在所拥有的内容，其中很接近：

Answer 1

不幸的是，mix-blend-mode并没有提供任何符合正好所需内容的选项。

difference：这会从最浅的颜色中减去两种颜色中较暗的颜色。

所以...如果你的背景颜色是蓝色rgb(0,0,255);而你的文字颜色是白色rgb(255,255,255);剩下的就是黄色rgb(255,255,0);

所以，如果我们使用黄色文字..我们在蓝色背景上获得白色文字，在白色上获得蓝色背景......它不是黑色，但它是我能做的最好的。

JSFiddle Demo

body {
  background: rgb(0, 0, 255);
  overflow: hidden;
}
body::before {
  content: 'o';
  font: bold 800px'Times', 'Times New Roman';
  color: white;
  position: absolute;
  left: -.25em;
  top: -.45em;
}
h1 {
  font-size: 40px;
  margin: 3em -3em 0 1em;
  mix-blend-mode: difference;
  color: rgb(255, 255, 0);
}

<h1>Welcome to the fiddle</h1>

给李斯特先生提示小提琴。

Answer 2

这将使您更接近想要做的事.....

    <style>
        .teaser {
        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 1em;
        max-width: 300px;
        overflow: hidden;
        position: relative;
    }
    .teaser:before, .teaser:after {
        content: '';
        display: block;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 300ms ease-out;
    }
    .teaser:before {
        z-index: 1;
        pointer-events: none;
    }
    @supports (mix-blend-mode: difference) {
        .teaser:before {
            background-color: white;
            mix-blend-mode: difference;
        }
    }
    .teaser:after {
        background-color: red;
        z-index: -1;
    }
    @supports (mix-blend-mode: difference) {
        .teaser:after {
            background-color: cyan;
        }
    }

    *, *:after, *:before {
        box-sizing: border-box;
    }

    body {
        margin: 1em;
    }
    </style>
    <div class="teaser">
        <h3>blend-mode with pseudos</h3>
        <p>Deleniti atque error quidem eaque eligendi ad, pariatur minima quisquam omnis veniam, sint voluptas, a ipsam illum debitis. Voluptatem esse, consectetur qui.Deleniti atque error quidem eaque eligendi ad, pariatur minima quisquam omnis veniam, sint voluptas, a ipsam illum debitis. </p>
    </div>

https://codepen.io/anon/pen/VqKbzK

混合混合模式，白色和蓝色

2 个答案: