0

Existe uma imagem e um texto sobreposto a ela que nada mais é que uma opção para alterar a imagem.

No entanto se a cor desse texto for branca por exemplo e a imagem tiver tons muito claros este texto não poderá ser visto!

Se o texto for preto e a imagem tiver tons muito escuros o mesmo acontecerá.

Isso acontecerá pra qualquer cor de texto, basta que os tons da imagem sejam parecidos.

Existe alguma forma de conseguir evitar esse problema? Alguma forma de 'detectar' os tons da imagem e só depois disso setar a cor do texto?

2

1 Resposta 1

1

Para criar um contraste automatico você pode usar o 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>

segue o link com o exemplo utilizando imagem: Exemplo imagem

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .