使文本显示为绿白色背景

Question

我有一个足球场，我将允许用户将球员拖到他想在球场上的任何地方。但是，我找不到一种方法让球员的名字在场上时清晰可见，正如您在 JSFiddle.

中看到的那样

我最后的尝试是这样的：

<p style="color: #3D59AB;">
    Philio
</p>

取自here。

如何让文字好看？

Answer 1

根据我上面的评论，尝试将文本包装在 <span> 中并设置样式。边框有助于将其与球场区分开来，弯曲时看起来更干净。

类似于：

HTML:

 <p>
     <span class="player">Philio</span>
 </p>

CSS:

body {
    background-image: url("http://p1.pichost.me/i/17/1401060.jpg");
}

p {
    padding: 120px;
}

.player {
    color: #000;
    background-color: rgba(40, 180, 40, 0.8);
    padding: 5px;
    border: 2px solid #000;
    border-radius: 50px;  // setting a border radius larger than 1/2 the height causes a rounded edge.
}

当然你可以玩弄值和颜色，祝你好运:)

FIDDLE

http://jsfiddle.net/et2twvek/6/

Answer 2

您可以使用 css 并使用文本阴影执行以下操作。

p {
    padding: 120px;
    color: #EEEE00;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 2px 2px #ff0000;
}

Fiddle

使文本显示为绿白色背景

Make text appear with green-white background

html

css

colors

background-image