Text overlaid in image always visible

Asked

Viewed 36 times

0

There is an image and text superimposed on it that 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 cannot 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 the image tones are similar.

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

html
  • 1

    Read on: http://thenewcode.com/1029/Automatic-Text-Contrast-with-CSS-Blend-Modes

  • Thank you so much! is what I need to see, site with very good content too!

1 answer

1


To create an automatic contrast you can use the 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>

follows the link with the example using image: Image example

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.