Как указать белый текст на белом фоне

Question

Итак, я работаю над пользовательским интерфейсом, где можно легко изменить различные функции (цвет шрифта, размер шрифта и т. Д.) Для нескольких тегов/разделов, главным образом h1, h2, h3, текст.

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

Что является лучшим способом указать пользователю, что у него белый шрифт на белом фоне (потому что он выглядит как «что-то не работает»)?

<div class ='preview'>PREVIEW: 
<p>Hello white text!</p> 
</div> 
<div class ='preview-2'>PREVIEW: 
<p>Hello white text!</p> 
</div> 
<div class ='preview-3'>PREVIEW: 
<p class = 'indicate'>Hello white text! (is there a better way to indicate white text on white background, better than make it gray?)</p> 
</div> 

http://jsfiddle.net/orbroxmp/

Я не жду ответа, как 'сделать что-то с вашим цветом фона'. По какой-то причине иногда она должна быть белой.

Благодарим за помощь и у вас будет хороший день!

Answer 1

Возможно, вы подумали, что вместо того, чтобы добавить штрих к вашему шрифту? В вашем CSS добавить

color: black; 
-webkit-text-fill-color: white; /* Will override color (regardless of order) */ 
-webkit-text-stroke-width: 1px; 
-webkit-text-stroke-color: black; 

таким образом текст может оставаться белым, но ход все еще позволяет ему быть видимым.

Answer 2

Вы можете сделать ход абзац в качестве примера вставьте этот код в CSS с вашей программе

p { 
    color: white; 
    -webkit-text-fill-color: black; 
    -webkit-text-stroke-width: 1px; 
    -webkit-text-stroke-color: black; 
}