Using text as a mask to invert the colours of anything behind it-CodePudding

I am working out a page that will have a quick-paced shuffle of images on one side, and would like to put bold and visually-attractive text that will lay over a corner of it as a mask and invert the colours of whatever is behind it. Are there any ways to style the text to do this in css?

I haven't been able to find any common solutions or workarounds for what I'm looking to achieve, only how to invert a selected colour.

CodePudding user response：

use a background color for the text
add a shadow below the text to enhance the contrast https://www.w3schools.com/cssref/tryit.php?filename=trycss3_text-shadow

h1 { text-shadow: 1px 1px red; }
Find a color that works well with all the images
Use mix-blend-mode: difference; https://css-tricks.com/methods-contrasting-text-backgrounds/

<!DOCTYPE html>
<html>
<head>
<style>

* { margin: 0; padding: 0 }

header {
  overflow: hidden;
  height: 100vh;
  background: url(https://cdn.britannica.com/70/191970-050-1EC34EBE/Color-wheel-light-color-spectrum.jpg) 50%/ cover
}

h2 {
  color: white;
  mix-blend-mode: difference;
  font: 900 35vmin/35vh cookie, cursive;
  text-align: center
}
</style>
</head>
<body>

<header>
  <h2 contentEditable role='textbox' aria-multiline='true'>And stay alive...</h2>
</header>

</body>
</html>

CodePudding user response：

This should work. mix-blend-mode: difference; makes the trick. I attached a working snippet.

.container {
  position: relative;
  height: 300px;
  width: 400px;
  display: flex;
}

.color-1 {
  width: 33%;
  background-color: red;
}

.color-2 {
  width: 33%;
  background-color: violet;
}

.image {
  width: 33%;
  background-image: url(https://picsum.photos/200/300);
}

p {
 margin: 0;
 width: 100%;
 position: absolute;
 font-family: 'Helvetica', sans-serif;
 font-weight: 600;
 text-align: center;
 font-size: 50px;
 top: 100px;
 left: 0;
 right: 0;
 color: white;
 mix-blend-mode: difference;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <p>Inverting Text</p>
</div>