如何在白色背景上指示白色文本

Question

因此，我的工作是用户界面，可以很容易地改变不同的功能(字体颜色，字体大小等)。用于几个标记/部分，主要是h1、h2、h3、text。

所有操作都是在空中进行的，因此用户可以在“预览-部分”(从某个变量设置的背景)中预览更改，假设场景中的背景是white。

什么是显示用户在白色背景上有白色字体的最佳方法(因为它看起来像是‘某样东西-不工作’)？

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