Kolor tekstu obsługującego tło

Question

Mam responsywną witrynę, która ma dynamicznie wielkości obraz tła, który ma pewne obszary ciemne i jasne. W przeglądarce kolory czcionki są ustawione tak, aby miały ładny kontrast w stosunku do koloru tła.

Niestety w projekcie responsywnym (mobilnym) tekst jest nakładany na ciemniejsze części zmienionego obrazu tła, a tekst może być bardzo trudny do odczytania. Czy ktoś wie o wtyczce jQuery lub technice, w której tekst może zostać uświadomiony w tle i odpowiednio zmienić styl/kolor?

Answer 1

możesz użyć cienia do zaznaczenia krawędzi tekstu.

body { 
/* your rules */ 
color: rgba(0 , 0, 0, 0.8); /* just a guess that it might be black;*/ 
text-shadow: 
    0 0 1px gold, 
    0 0 3px white; /* choose how many and which colors */ 
} 

To jest pomysł

Answer 2

co prosicie byłyby w zasadzie pociąga za sobą to:

• przypisywania każde słowo w tekście zostać owinięte <span>
• użyć% pozycji od góry/left, aby uzyskać miejsce na obrazie i dynamicznie przypisać kolor do przęseł, które wchodzą w ten obszar.

Z braku lepszego słowa, NIE. To absurdalne i zbyt wiele do zracjonalizowania.

Dlaczego po prostu nie podać półprzezroczystego tła do pojemnika dla tekstu, tak aby wyróżniał się bardziej?

.Container { 
    background-color:rgba(0,0,0,0.5); 
} 

Zapewnia to jasny odcień tekstu, który można wyświetlić na obrazie, a jednocześnie pozwala wyświetlić cały obraz na stronie.

Rozwiązanie typu "cieniowanie tekstu" również jest dobrym pomysłem, ale tylko o tym, że nie zadziała na IE9-. Moje rozwiązanie działa na IE9, ale nie na IE8-, co nie znaczy, że jest lepsze, ale po prostu o czymś pamiętać.