Изменить цвет текста, если фоновое изображение не белое?

#html #css #css3

Я прочитал много статей об этом, но ничего не нашел подходящего, чтобы решить мою
проблему.    

Возможно ли каким-либо образом изменить цвет текста на основе фонового изображения
с помощью JQuery и / или CSS?    

Я должен сделать отзывчивый веб-сайт с этими требованиями, но застрял.  


    

Ответы

Ответ 1

Можно использовать режим смешивания. Поддержка браузерами такая же. Не применяется
к body.



body{
  margin:0;  
  font-size:50px;
  font-weight:bold;
  color:#4cb29c;
  
}
div{
  background:linear-gradient(to right, #4cb29c 50%,transparent 50%);
  min-height:50vh;
}

p{  
  text-align:center;
  mix-blend-mode: difference;
  margin:0;
}
.circle{
  color:#ee82ee;
  background: 
   radial-gradient(circle at 75% 0px, #fff 35%, rgba(27, 128, 0, 0.6) 35.5%),   
   url(https://picsum.photos/500/800?image=1069) center/cover;
}

  
asdas das safd gfs gsfgsdf sdf sdfs df


  
asdas das safd gfs gsfgsdf sdf sdfs df



Ответ 2

Идея состоит в том, чтобы покрасить текст инвертированным фоном.

Вот идея, использующая радиальный градиент:  



.box {
  padding: 50px;
  background: radial-gradient(circle at 70% 0px, #fff 45%, purple 45.5%) fixed;
}

p {
  font-size: 25px;
  font-weight: bold;
  /*Должен быть тот же фон, но инвертированный цвет*/
  background: radial-gradient(circle at 70% 0px, purple 45%, #fff 45.5%) fixed;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

  
Some text here Some text here Some text here Some text here 





В вашем случае фон выглядит изображением, поэтому вам просто нужно найти похожий
градиент, где вы можете инвертировать цвета.

Другая идея - использовать базовое изображение и добавить наложение для создания
результата: 



.box {
  padding: 50px;
  background: 
   radial-gradient(circle at 70% 0px, #fff 35%, rgba(27, 128, 0, 0.6) 35.5%),   
   url(https://picsum.photos/500/800?image=1069) center/cover;
  background-attachment:fixed;
}

p {
  font-size: 25px;
  font-weight: bold;
  /*Должен быть тот же фон, но инвертированный цвет*/
  background: radial-gradient(circle at 70% 0px, rgba(27, 128, 0, 1) 35%, #fff 35.5%)
fixed;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

  
Some text here Some text here Some text here Some text here 





Источник ответа