Question

我有一个显示post.title的html模板，由用户输入。

 <section id="home" class="">
    <h1 class="main-heading"><%= @post.title %></h1>
  </section>

用户的标题长度未知。它可以是（例如）5,20或100个字符。

我想在文字后面放一个低透明度的黑色背景，以帮助读者区分标题：

.main-heading {
    /*TEXT ON MAIN PIC*/
  height: 20%;
  width: auto;
  padding: 20px;
  font-family: 'Open sans', sans-serif;
  font-size: 95px;
  font-weight: 300;
  text-align: center;
  letter-spacing: 9px;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px rgba(100,100,100,0.6);
  background-color: rgba(10,10,10,0.2);
}

我可以调整高度和宽度以获得可预测的标题，但不知道如何将这些值应用于大小不同的标题。

Answer 1

将<%= @post.title %>包裹到span（h1内），将您的样式应用于该范围，并将display: inline-block添加到其中：

.main-heading>span {
  display: inline-block;
  height: 20%;
  width: auto;
  padding: 20px;
  font-family: 'Open sans', sans-serif;
  font-size: 32px;
  font-weight: 300;
  text-align: center;
  letter-spacing: 9px;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
  background-color: rgba(10, 10, 10, 0.2);
}

<section id="home" class="">
  <h1 class="main-heading"><span><%= @post.title %></span></h1>
</section>

Answer 2

我的建议是添加一个你可以设计的包装器。

.main-heading {
    /*TEXT ON MAIN PIC*/
  height: 20%;
  width: auto;
  padding: 20px;
  font-family: 'Open sans', sans-serif;
  font-size: 95px;
  font-weight: 300;
  text-align: center;
  letter-spacing: 9px;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px rgba(100,100,100,0.6);
}

.background {
  background-color: rgba(10,10,10,0.2);
}

<section id="home" class="">
    <h1 class="main-heading">
        <span class="background">
            foobar
        </span>
    </h1>
</section>

我认为这是你正在寻找的，而且它也很简单。当然，您可以设置display: inline-block并随意添加填充/边距。

在具有未知大小的标题上设置背景颜色

2 个答案: