适合内容的背景颜色标签
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了适合内容的背景颜色标签相关的知识，希望对你有一定的参考价值。
场景：
- 我无法弄清楚如何在仅覆盖文本而不是整个正方形的文本后面有50％的不透明度“框”。
- 我有一个h2-tag我已经指定了这个CSS：
background: rgba(0, 0, 0, 0.5); width: fit-content;
问题：
- 我在p-tag上试过同样的东西，但那不起作用......
答案
这工作正常。检查一下
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>另一答案
如果你想要文本背后的颜色，那么使用<mark>标签
mark{
background: rgba(0, 0, 0, 0.5);
}<mark> test</mark>另一答案
试试这种方式。
p{
background: rgb(0, 0, 0 , 0.5);
opacity: 0.5;
}
<p>Hello world</p>
这对我有用。 :)
另一答案
您需要一个像<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>另一答案
.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>另一答案
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>另一答案
你使<p>内联。请参阅下面的代码段。这也适用于width: 100%;。
p {
background: rgba(255, 0, 0, 0.2);
width: auto;
display: inline;
}<p>
hello world
</p>以上是关于适合内容的背景颜色标签的主要内容，如果未能解决你的问题，请参考以下文章