如何在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中放置填充和颜色即可应用样式。如果需要，还可以将文本的背景确定为“ background-color：transparent”，并获得不同的效果。

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>