Text superimposed on always visible image

Navigation
0

There is an image and text superimposed on it, which is nothing more than an option to change the image.

However if the color of this text is white for example and the image has very light tones this text can not be seen!

If the text is black and the image has very dark tones the same will happen.

This will happen for any text color, just make the tones of the image look alike.

Is there any way I can avoid this problem? Any way to 'detect' the tones of the image and only after that set the color of the text?

    
asked by anonymous 23.06.2017 / 16:35

1 answer

1

To create an automatic contrast you can use mix-blend-mode: difference; 

body {
	text-align: center;
	font-family: Montserrat, sans-serif;
	color: #000;
	background-image: linear-gradient(90deg,#fff 49.9%,#000 50%);
}
h1 {
	font-size: 10vw;
  color: #fff;
	mix-blend-mode: difference; 
}
<body>
<h1>Teste</h1>
</body>

follow the link with the example using image: Example image

    
23.06.2017 / 17:04
SQLITE login screen Spaces between Inputs in Twiter Bootstrap