在文本属性中添加背景颜色答案

【问题标题】：Adding background Color in Text Property在文本属性中添加背景颜色
【发布时间】：2020-10-31 04:37:47
【问题描述】：

美好的一天，我只是想问一下如何只选择文本而不是 li 的整个宽度，因为我想要发生的是添加一个具有透明度的背景颜色，就像图像中的文本一样，

我尝试在显示属性中播放，但我无法获得它。提前非常感谢。

.container-two .skills{
    margin: 3rem 0 0 4rem;
}

.container-two .skills ul li {
    padding-top: 2rem;
    font-size: 3rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.container-two .skills span {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    text-align: center;
    color: white;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-right: 1rem;
    font-size: 1.5rem;
}

.container-two .skills .html-span {
    background-color: #F16529;
}

.container-two .skills .css-span {
    background-color: #4B8BBE;
}

.container-two .skills .javascript-span {
    background-color: #EF9C44;
}

.container-two .skills .python-span {
    background-color: #7666A7;
}

.container-two .skills p {
    width: 100%;
    background-color: black;
}

 <section class="container-two">
        <img src="/images/skills.png" alt="My Skills" class="skills-image">
        <div class="info">
            <div></div>
            <p>Skills <i class="far fa-address-card about-card"></i></p>
        </div>
        <div class="skills">
            <ul>
                <li class="html"> <span class="html-span">1.</span><p>HTML</p></li>
                <li class="css"><span class="css-span">2.</span>CSS</li>
                <li class="javascript"><span class="javascript-span">3.</span>JAVASCRIPT</l>
                <li class="python"><span class="python-span">4.</span>PYTHON</li>
            </ul>
    </section>

【问题讨论】：

你的背景应该只覆盖内容的下半部分？

标签： html css

【解决方案1】：

您可以通过从项目内的p 标记中删除width: 100% 来做到这一点，或者将其替换为width: fit-content。

.container-two .skills p {
    width: fit-content;
    background-color: rgba(0,0,0,.2);
}

【讨论】：

【解决方案2】：

来自https://stackoverflow.com/a/40958779/142160031的参考，

我们可以得到与给定图像完全相同的输出

对于从底部到中心的背景，您可以使用线性渐变to top属性

用于设置与文本宽度相同的背景大小

display:inline-block 将为您完成工作

.half {
  background: linear-gradient(to top, rgba(0,0,0,0.3) 50%, transparent 0);
  display:inline-block;
}

&lt;p class="half"&gt;HTML&lt;/p&gt;

【讨论】：

【解决方案3】：

我认为最好按照 MDN 文档 设置 width: auto;，因为浏览器会计算并选择指定元素的宽度。现在为了获得透明背景，我使用了 从 0.1 开始的值，因为它更接近您提供的图像。

.container-two .skills p {
    width: auto;
    background-color: rgba(0,0,0,0.1);
}

【讨论】：