Question

我试图给html中的文本提供背景但是我被卡住了。

我尝试过以下代码：

<p><span style="background-color: #000;color:#fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</span></p>

结果是：

这就是我想要做的事情（比如所选文字）：

不知道该怎么做。任何帮助都会很棒。

谢谢！

Answer 1

我想这就是你要做的事情。

您需要制作段落inline （这将使黑色仅保留在您的文字后面而不会溢出），然后应用少量padding和{{ 1}}到你的段落，所以线条触摸，看起来不错。

＆＃13;

line-height

＆＃13;

p {
  display: inline;
  background-color: rgba(0,0,0,.7);
  color: #fff;
  line-height: 1.4;
}

＆＃13;

Answer 2

让我解释一下你需要做什么...... 您对 span 标记的样式将其删除并将其提供给“P”标记，这将解决您的问题。

所以你会得到这样的：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <p style="background-color:rgba(0, 0, 0, 0.45) ;color:#fff; display: inline; padding: .4em; line-height: 140%;"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</span></p>            
    </body>
</html>

Answer 3

如果您希望透明度使用background: rgba(0, 0, 0, 0.5)，其中最后一个值是透明度。

不幸的是，IE8不支持http://caniuse.com/#search=rgba。您可以将filter用于IE 8 http://rland.me.uk/cross-browser-alpha-transparent-background-10-2011/

另外，要获得完整的色块，请将样式放在p标签上，而不是跨度。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt bibendum ligula, ac pulvinar justo scelerisque in. Ut nec auctor urna.</p>

p {
  background-color: rgba(0, 0, 0, 0.5);
  color:#fff;
  display: inline;
}

使用透明背景，您可以解决颜色重叠和线条之间较暗的问题，您可以使用line-height:来解决此问题。

Answer 4

尝试这个jsfiddle：https://jsfiddle.net/xm4sLch8/1/或将css应用于你的范围：

span{
    background: rgba(0,0,0,0.7);
    color: #fff;
    line-height: 32px;
    padding: 7px;
}

我们可以提供line-height，background代替background-color来应用具有相同效果的背景透明度

文本的背景颜色

4 个答案: