Changer la couleur du texte après 50% de hauteur à 175deg

Question

Je change de couleur de fond après 50% de hauteur avec un angle de 175 degrés. Donc, je veux que la couleur du texte devienne blanche, quand la couleur de fond est bleue. Fiddle

.bg { 
 
     background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%); 
 
     color:#000; 
 
}

<div class="bg"> 
 
<h1> 
 
Hiii, My Name is John, I love Stackoverflow. I really don't know, how to do this, Can someone help me? If Background = Blue, Text Color = White 
 
</h1> 
 
    
 
</div> 
 

 

 
</div>

Answer 1

Si vous avez besoin du contraste, et non pas les couleurs exactes, vous pouvez utiliser mix-blend-mode pour modifier dynamiquement la couleur selon l'arrière-plan:

.bg { 
 
    background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%); 
 
    color: #000; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
    mix-blend-mode: difference; 
 
}

<div class="bg"> 
 
    <h1> 
 
    Hiii, My Name is John, I love Stackoverflow. I really don't know, how to do this, Can someone help me? If Background = Blue, Text Color = White 
 
    </h1> 
 

 
</div> 
 

 

 
</div>

Answer 2

vous pouvez appliquer spécifiquement cette couleur. voir https://jsfiddle.net/h7jhcbm0/2/

.bg { 
    background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%); 
    color: #000; 
} 

h3 { 
    color: #fff 
}