html - 如何在 CSS 中的文本后面获得纯色背景？

Question

我正在处理背景图像上的 p 标签的网站的一部分：

我已经为标签和填充设置了背景颜色，但无论出于何种原因，我都不能让它成为文本后面的纯色块

Answer 1

span {
 font-size: 2.2rem;
}
.bg-pad {    
 background: #c0392b;
 color: #fff;
 line-height: 3rem;
}

<span class="bg-pad">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quisquam quas nesciunt quaerat consequatur, illum ipsa accusamus, optio molestias quae id autem praesentium quia, nostrum quis, velit dolorem. Magni, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quisquam quas nesciunt quaerat consequatur, illum ipsa accusamus, optio molestias quae id autem praesentium quia, nostrum quis, velit dolorem. Magni, magnam.</span>

Answer 2

p {

  padding: 5px;
  background-color: red;
  }
  
span {

  background: #c0392b;
 color: #fff;
 line-height: 3rem;
  }

<p>
lor ut congue egestas, odio urna facilisis tortor, sed tempor ex metus at leo. Maecenas ac sem ut ante porta sodales.</p>


<span>lor ut congue egestas, odio urna facilisis tortor, sed tempor ex metus at leo. Maecenas ac sem ut ante porta sodales.<span>

嗨，您只需将填充和颜色放入 CSS 中即可应用样式。如果您愿意，您还可以将文本的背景确定为“背景颜色：透明”并实现不同的效果。

Answer 3

您可以将段落放在 div 中。并为此设置背景

div{
  background:orange;
  color:white;
}
section{
  background:url(https://picsum.photos/458/354);
  height:200px;
}

<section>
<div>
<p>Any text wth long description, you can write anything here becuase i have a background form div. and i will not longer see you space behind me.Any text wth long description, you can write anything here becuase i have a background form div. and i will not longer see you space behind me.Any text wth long description, you can write anything here becuase i have a background form div. and i will not longer see you space behind me.

</p>
</div>
</section>