Html 如何在CSS中为段落中的文本部分添加单独的背景，如我分享的图片中的部分

在图像中，指的是城市图像，在黑色+白色徽标下。 在图像上有一些文字，并有透明的背景分别为单独的行

---

如何在不使用

或任何其他html标记的情况下，仅使用css将这种背景添加到同一段落的3行中。

假设这样的结构：

<div class="header">
    <p>Some text</p>
</div>

---

您可以使用浏览器的文档检查器检查任何网站，自己发现类似的技术

基本上，您只需要将单独的文本行设置为

显示：内联块

，最好在其周围有一些

边距

对于文本背景透明度，您需要使用红-绿-蓝阿尔法模型（RGBa）。根据Mozilla开发者网络的定义：

RGBa扩展RGB颜色模型以包括alpha通道， 允许指定颜色的不透明度

利用上述理念，我们可以看到：

.container{
背景：透明url（'https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg’）上止点不重复；
高度：300px；
背景大小：100%；
位置：相对位置；
}
.container>div{
位置：绝对位置；
底部：10px；
}
.文本{
背景色：rgba（31,31,31,0.55）；
颜色：白色；
字号：18px；
字体系列：Arial、Helvetica、无衬线字体；
边缘顶部：10px；
文本转换：大写；
填充：10px；
显示：内联块；
}

这里会有一些花言巧语
总结一下生意的情况
事实上，它代表着

因此需要将代码的相关部分（在本例中，是一些解决问题的尝试）放在此处。请说吧。我认为你没有抓住（可怜的）问题的重点。这是关于文本行之间的“非背景”。你的技巧并没有解决这个问题。玩得开心吧……据我所知，这并不容易。是的，但看看老年退休金计划（可怜的）问题。你忽略了一个段落的基本前提。

.header p {
    background-color: rgba(0,0,0,.3);
    display: inline;
    font-size: 24px;
    line-height: 36px;
}