Предположим, у меня есть синий и белый фон. Я хочу, чтобы мой текст был черным, когда фон белый, а затем белый, когда фон синий.mix-blend-mode с белым и синим
Я пробовал:
mix-blend-mode: difference;
Он работает, когда он над белым (дает мне черный текст). Но это дает мне желтый текст.
Вот что у меня есть сейчас, что близко:
К сожалению, mix-blend-mode действительно не предлагает никаких вариантов, которые будут соответствовать точно то, что вы ищете.
difference: это вычитает более темный из двух цветов из самого светлого цвета.
Так что ... если цвет фона синий rgb(0,0,255); и цвет текста белый rgb(255,255,255);, что осталось желтый rgb(255,255,0);
Таким образом, если мы используем желтый text..we получить белый текст на синем фоне и синий фон на белом ... он не черный, но это лучшее, что я могу сделать.
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>Hat-наконечник, чтобы г-Lister для стартера скрипку.
Это ожидаемое поведение ... Не уверен, что вы можете с этим поделать. –
Если вы дадите людям jsfiddle для игры, возможно, кто-то наткнется на решение ... [Здесь] (https://jsfiddle.net/MrLister/ffcfu4r9/), я сделал один. Нет, не решение. –
Thx @MrLister Я немного вне своего типичного царства здесь. Моим временным решением является настройка фона, так что белый цвет не переливается в белый цвет во множестве различных спецификаций '@media {max-width: XXXpx}' в CSS. –