Как применить обратную текстовую маску с помощью CSS

Я попытаюсь объяснить свой вопрос изображениями. Здесь мы идем.

1 - На этом изображении отображается текст, маскирующий изображение, настолько хорошее, что я могу сделать со следующим кодом:

enter image description here

font-size: 120px;
background: url(image-to-be-masked.jpg) repeat 0 0, white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

2 - Это другое изображение, текст создает противоположный эффект, оставляя прозрачным только текстовую область. Это то, что я хочу:

enter image description here

Кто-нибудь попробовал?

Ответы

Ответ 1

Я не думаю, что CSS может это сделать. Но вы можете взломать его, используя три разных вложенных элемента:

  • Самый внешний элемент содержит фоновое изображение
  • Средний элемент содержит среднее изображение
  • Внутренний элемент содержит текст и имеет то же фоновое изображение, что и внешний элемент, замаскированный с помощью background-clip:text;, как в первом примере.

Это работает, но немного громоздко, так как вам придется компенсировать фоновое положение маски для достижения желаемого эффекта. Вот пример: http://jsfiddle.net/dzkTE/.

Ответ 2

Мне удалось добиться этого несколькими парами методов. См. Мой ответ здесь: fooobar.com/questions/486751/...

См. ниже:

Существует три способа поиска в HTML/CSS/JavaScript, некоторые из которых немного взломаны, чем другие.

  • Используйте <canvas>, чтобы нарисовать фигуру и тип, и установите ctx.globalCompositeOperation="xor";, где ctx - ваш контекст canvas.

var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.font = "bold 36px Proxima Nova";
ctx.fillStyle='blue';
ctx.fillText("MORE",100,87);
ctx.globalCompositeOperation='xor';
ctx.beginPath();
ctx.fillStyle='white';
ctx.arc(150,75,75,0,2*Math.PI);
ctx.fill();
body{
  background: -webkit-radial-gradient(top left,rgb(23, 39, 34) 4%,rgb(56, 99, 99) 37%,rgb(22, 27, 15) 73%,rgb(22, 27, 14) 93%,#232323 100%);
  width:100%;
  height:100%;
}

html{
  height:100%
}
<canvas id='myCanvas'></canvas>

Ответ 3

* { margin: 0; padding: 0 }

header {
    overflow: hidden;
    height: 100vh;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_art_bw_butterfly_bg.jpg) 50%/ cover
}

h2 {
    color: white;
    mix-blend-mode: difference;
    font: 900 35vmin/35vh cookie, cursive;
    text-align: center
}
<header>
    <h2 contentEditable role='textbox' aria-multiline='true'>And stay alive...</h2>
</header>

Ответ 4

[извините, я неправильно понял это. Я пробовал наоборот, думаю: P] Я думаю, вы можете сделать это, используя фоновый клип.

background-clip:text;

проверьте здесь (попробуйте в Chrome или добавьте префиксы поставщика). вы можете проверить демо-страницу в форме chris.