Question

我正在学习Ruby on Rails来创建一个网站，我正在寻找一种方法（最好是最传统的方法）来创建仅覆盖文本背面的白色矩形（以便更容易阅读）。

我之前对java，C和Python等语言有很好的了解，但我对RoR，HTML，CSS完全不熟悉。

我完成了以下博客教程并添加了背景。 http://guides.rubyonrails.org/getting_started.html 因此，我没有任何相关的代码可以分享，它只是基本的东西。

我还希望进一步了解如何更好地控制我将要绘制的数字（如何使角稍微倒圆，如何使矩形尺寸略大于文字大小等）。

Answer 1

感觉就像想要使用Adobe Illustrator或类似的东西来绘制海报。

对于WEB设计，你不应该这样理由。将您的网页视为一系列容器，可以挤压并适应您的内容。

创建将覆盖文本背面的白色矩形

这只是你容器的背景。但是如果你真的想要一些只覆盖字母的东西，你可以试试像

HTML：

<span class="white-shadow">Your text</span>

CSS

.white-shadow{
  background: white;
}

使角落略微圆润

这是一个名为

.your_class{
  border-radius: 2px 2px 0 0; // Round corners of 2px radius for top left/right corners
}

使矩形尺寸略大于文字尺寸

您实际上想要在容器中添加一些填充

.container{
  padding: 5px 10px 5px 10px;
}

如果您不了解这些内容，我强烈建议您按照HTML / CSS教程进行操作。

Answer 2

我知道我参加这个派对已经晚了几分钟，但是如果这有帮助的话：

<!DOCTYPE html>
<html>
<head>
<title>SO30947882 Test</title>
<style>
body { /* The entire page's <body> element */
  background-color: gray;
}

* { /* Every element */
  color: black;
}

.my-text { /* Elements with this class property */
  background-color: white;
  padding: 2px;
  line-height: 1em;
  margin: 0 1px;
  border-radius: 2px;
}
</style>
</head>

<body>
<p>Hard to read this.</p>
<p class="my-text">Easier to read this, in a block.</p>
<p>
  <label>Dark text.</label> <label class="my-text">Better text, inline.</label><br/>
  <label>M<span class="my-text">ixe</span>d T<span class="my-text">ex</span>t.</label>
</p>
</body>
</html>

这是一些非常基本的CSS样式定义。 CSS选择器（如此处的body和.my-text）非常强大，因为它们自然结合在一起。

快乐的造型。

如何绘制可扩展的矩形Ruby on Rails

2 个答案: