html - 使文本显示为绿白色背景

Question

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

我最后的尝试是这样的:

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

取自here .

如何让文字好看？

Answer 1

根据我上面的评论，尝试将文本包装在 <span> 中和造型。边框有助于将它与球场区分开来， flex 时看起来更干净一些。

类似于:

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

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

fiddle

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