Zmiana koloru tekstu na podstawie koloru tła

Question

Czy jest możliwa dynamiczna zmiana koloru tekstu na podstawie koloru tła za pomocą CSS lub JS, jeśli nie jest to możliwe przy CSS? Mam obraz, który znajduje się pod tekstem. Kolor mojego tekstu jest biały, ale obraz ma biały kształt. A gdy tekst przekracza biały kształt, muszę zmienić kolor tekstu w ciemniejszym kolorze.

HTML:

<div class="biography"> 
      <img src="http://s16.postimg.org/c09zw94jp/author_photo.png" alt="author" class="bio-img"> 
      <div class="biography-text"> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit <br> 
        Vestibulum pellentesque auctor quam a sollicitudin.<br> 
        Pellentesque accumsan a sem eget dictum. 
       </p> 
       <p> 
        Morbi dictum lorem tortor, id consequat libero gravida ut.<br> 
Nullam dictum sed massa et bibendum. 
       </p> 
       <p>Praesent sed dui mattis, dictum urna sit amet, imperdiet purus.</p> 
       <p> Suspendisse potenti.</p> 
      </div> 
     </div> 

CSS:

body { 
    background-color: #7ccbe6; 
} 
.biography { 
    min-height: 410px; 
} 
.biography .biography-text { 
    position: relative; 
    margin-top: -420px; 
    padding: 82px 130px 0 380px; 
    z-index: 1; 
} 

.biography-text { 
    color: #fff; 
} 

Oto Codepen zobaczyć lepszy obraz.

Answer 1

Prawdopodobnie trzeba to:

Change text color based on brightness of the covered background area?

var rgb = [255, 0, 0]; 

setInterval(function() { 
    var c = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 
    var o = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114))/1000); 
    (o > 125) ? $('#bg').css('color', 'black'): $('#bg').css('color', 'white'); //http://www.w3.org/TR/AERT#color-contrast 
    $('#bg').css('background-color', c); 
    rgb[0] = Math.round(Math.random() * 255); 
    rgb[1] = Math.round(Math.random() * 255); 
    rgb[2] = Math.round(Math.random() * 255); 
}, 1000); 

JSFiddle

---

Aktualizacja:

U W tym przykładzie na JSFiddle, wystarczy zmienić background color

Answer 2

Istnieje kilka sposobów, aby to osiągnąć. Możesz renderować obraz na (ukrytym) kanwie i analizować kolory obrazu, aby wiedzieć, który kolor powinien być tekstem. Możesz również zrobić to samo z php i wstępnie przetworzyć informacje o kolorze obrazu.

Znalazłem również tę bibliotekę JavaScript, która może pomóc: http://www.kennethcachia.com/background-check/. (Możesz zawinąć każdą literę w element span, aby określić odpowiedni kolor do użycia na literę.)

Answer 3

Rozumiem, że szukasz rozwiązania JS. Jednak jeśli ktoś chce rozwiązania css tutaj jest rozwiązanie http://codepen.io/hellouniverse/pen/JNwvyL

$bg-color: black; // This can change 
$white : #fff; 
$black : #000; 

@function set-text-color($color) { 
    @if (lightness($color) > 50) { 
     @return $black; // Lighter color, return black 
    } 
    @else { 
     @return $white; // Darker color, return white 
    } 
} 

.text--color { 
    background: $bg-color; 
    color: set-text-color($bg-color); 
} 

// this is here just for demon purpose 
.text { 
    padding: 10px; 
    text-align: center; 
} 


<p class="text text--color">I change in color</p> 

Answer 4

Dla tego rodzaju problemu bym użyć czystego roztworu CSS zarys tekst ...

.biography-text { 
    color: #fff; 
    font-weight: bold; 
    letter-spacing: 2px; 
    text-shadow: 1px 1px 0 #333, 
     -1px -1px 0 #333, 
     1px -1px 0 #333, 
     -1px 1px 0 #333, 
     2px 2px 5px rgba(0,0,0,0.65); 
} 

Zmień letter-spacing i ostateczną dyrektywę właściwości text-shadow zgodnie z Twoimi potrzebami.