CSS中的文本背景[关闭]答案

【问题标题】：Text Background in CSS [closed]CSS中的文本背景[关闭]
【发布时间】：2014-07-31 19:13:50
【问题描述】：

您好，我想知道如何让我的文本背景看起来像 my website 的滑块p>

<h1 class = "myClass">My Text Here</h1>

我想在css中给它一个透明的黑色背景

.myClass{
      font-size:70px;
      color: white;
}

我还需要它只在我的文本后面我不希望背景占据页面的整个宽度

解决方法很简单

padding: 4px 0;
font-size: 70px;
color: white;
background-color: rgba(0,0,0, .5);
line-height: 95px;
display: inline;

【问题讨论】：

【解决方案1】：

另外，添加行高

.WatchDogs {
  font-size: 70px;
  line-height: 95px;
  color: white;
  background-color: rgba(0,0,0, .5);
  display: inline;
}

【讨论】：

【解决方案2】：

您所需要的只是 CSS background-color 与 rgba() 颜色值一致。以下代码将为您提供 50% 不透明度的黑色背景。查看更多关于rgba

.myClass {
    font-size:70px;
    color: white;
    background-color:rgba(0,0,0, .5);
}

【讨论】：

好的，但我只希望它在文本周围而不是跨越整个容器
这是我想要的颜色，但现在它是一个又长又宽的窄条
@arcreigh 您指的是文本周围的笔划吗？我提供的代码正是您网站上使用的代码。您可以添加 padding: 4px 0; 使其更宽（就像您的网站一样）
不去这里的链接它会告诉你它在做什么
填充并没有解决长瘦的问题。对不起，我的描述不够好描述：D

【解决方案3】：

还添加 display:inline 使其拉伸到文本的宽度。

【讨论】：