时间戳

首页 > 解决方案 > 在文本属性中添加背景颜色

html - 在文本属性中添加背景颜色

问题描述

美好的一天，我只想问是否如何只选择文本而不是 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>

标签： htmlcss

解决方案

您可以通过删除项目内width: 100%的p标签或将其替换为width: fit-content.

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

推荐阅读