Question

场景：

我不知道如何在仅覆盖文本而不是整个正方形的文本后面有50％的不透明度“框”。
我有一个h2-tag，我已将此CSS指定为：

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

问题：

我在p标签上尝试了相同的操作，但这不起作用...

Answer 1

如果您想在文本后面加上颜色，请使用<mark>标签

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

<mark> test</mark>

Answer 2

这很好。选中此

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 3

尝试这种方式。

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

<p>Hello world</p>

这对我有用。：）

Answer 4

您需要一个<span>之类的内联元素，并将相同的颜色应用于该内联元素。否则，您可以将display：inline应用于<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

.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 6

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 7

您直接插入<p>。请参见下面的代码段。 width: 100%;也可以使用。

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

<p>
hello world
</p>

背景颜色以适应<p>标签上的内容

7 个答案: