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

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;
}