Цвет фона для размещения содержимого на теге <p>

Question

Сценарий:

• Я не могу понять, как завести рамку с непрозрачностью 50% за текстом, который просто покрывает текст, а нецелый квадрат.

• У меня есть h2-тег, для которого я указал этот CSS:

  background: rgba(0, 0, 0, 0.5); width: fit-content;

Проблема:

• Я пытался сделать то же самое для p-тега, но это не работает ...

Answer 1

p{
background-color:lightgreen;
margin:10px;
}

p.p{
background-color:lightpink;
margin:10px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
<p class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<p class="p">Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p class="p">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
<p class="p"> Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 2

Вы делаете <p> встроенным.Смотрите ниже фрагмент.Это также работает с width: 100%;.

p {
  background: rgba(255, 0, 0, 0.2);
  width: auto;
  display: inline;
}

<p>
hello world
</p>

Answer 3

.back {
  background-color: red;
  width: 100%;
  height: 200px;
  text-align: center;
  padding-top: 20px;
}
h2 {
  color: #000000;
  font-size: 35px;
  font-weight: 900;
}
p {
  color: #ffffff;
  font-size: 16px;
}

<div class="back">
  <h2>This is h2 text</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</div>

Пожалуйста, проверьте вышеуказанный код.

Answer 4

Вам нужен встроенный элемент, такой как <span>, и примените тот же цвет к этому встроенному элементу.В противном случае вы можете применить отображение: встроенное к вашему <p>.

p{
  background: rgba(255, 0, 0, .5);
  display: inline;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus risus, tincidunt vel accumsan et, tempus placerat nisi. Suspendisse ornare, elit vitae vulputate pulvinar, arcu mi pretium lorem, et ultricies elit purus interdum nulla. Suspendisse vel erat id tellus venenatis viverra. Donec et mauris efficitur<p>

Надеюсь, это то, что вы ищете.

Answer 5

Попробуйте вот так.

p{
   background: rgb(0, 0, 0 , 0.5);
   opacity: 0.5;
}

<p>Hello world</p>

Это работает для меня.:)

Answer 6

это работает нормально.Проверить это

h2{
 background: rgba(0, 0, 0, 0.5);
width: fit-content;
}

p{
 background: rgba(0, 0, 0, 0.5);
width: fit-content;
}

<h2>Some Text Here</h2>

<p>Some Text Here</p>

Answer 7

если вы хотите, чтобы цвет был за текстом, используйте <mark> tag

mark{
  background: rgba(0, 0, 0, 0.5);
}

<mark> test</mark>