如何使我的html文本背景透明而不使文本透明答案

【问题标题】：how to make my html text background transparent without makeing the text transparent如何使我的html文本背景透明而不使文本透明
【发布时间】：2021-05-21 21:33:43
【问题描述】：

如何使我的 html 文本透明

我正在尝试制作一个 css 和 html 导航栏 evetything 是美丽而模糊的背景与
背景滤镜：模糊（8px）；在 css 文件中，但在 html 中，当我来编写文本时正文部分：

我的文字是这样的： [没有模糊背景的文字的东西和brobem 1] 这是导航栏的css代码：

*,
*:before,
*:after{
    padding:0;
    margin:0;
    box-sizing:border-box;


}
nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    padding: 25px 35px;
    font-family: "Arial Rounded MT",sans-serif;
    box-shadow: 0 20px 30px rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);
}

header{
    height:70px;
    background:url("");
    background-size:cover;
    background-position:center;

}

ul{
    list-style:none;
}

li{
    display:inline-block;
}

li a {
   margin-left:40px;
}

nav a {
    color: #ffffff;
    letter-spacing:1px;
    text-decoration:none
}

<nav>
    <a herf="#LELKASA">
        LELKASA
    </a>
    <ul>
        <li>
            <a herf="#Home">Home</a>
        </li>

        <li>
            <a herf="#SiteMap">SiteMap</a>
        </li>

        <li>
            <a herf="#Download Center">Download Center</a>
        </li>

        <li>
            <a herf="#About">About</a>
        </li>
    </ul>
</nav>

【问题讨论】：

是否有一些问题图片可以帮助我们进一步理解？
imgur.com/a/ePamJ75 文本有黑色背景，它是我用于 html 的背景>

标签： css

【解决方案1】：

如果你想让文本有背景：

nav a {
    color: #ffffff;
    letter-spacing:1px;
    text-decoration:none;
    background: rgb(255,255,255,0.1);
}

前三个值是 r,g,b 的范围从 0 到 255。如果我给所有 255，它将更接近白色，如果我给所有 0，它将更接近黑色。最后一个属性的范围从 0 到 1 决定透明度。

【讨论】：

【解决方案2】：

如果您想模糊导航链接，可以将opacity 设置为它们。我已将opacity: 0.7 添加到导航链接。当鼠标悬停在每一个上时，不透明度变为 1。您可以通过为它们设置较低的不透明度值来使它们更加模糊。

*,
*:before,
*:after{
    padding:0;
    margin:0;
    box-sizing:border-box;


}
nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    padding: 25px 35px;
    font-family: "Arial Rounded MT",sans-serif;
    box-shadow: 0 20px 30px rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);
}

header{
    height:70px;
    background:url("");
    background-size:cover;
    background-position:center;

}

ul{
    list-style:none;
}

li{
    display:inline-block;
}

li a {
   margin-left:40px;
}

nav a {
    color: #ffffff;
    letter-spacing:1px;
    text-decoration:none;
    opacity: 0.7;
}
nav a:hover {
  opacity: 1;
  cursor: pointer;
}

<nav>
    <a herf="#LELKASA">
        LELKASA
    </a>
    <ul>
        <li>
            <a herf="#Home">Home</a>
        </li>

        <li>
            <a herf="#SiteMap">SiteMap</a>
        </li>

        <li>
            <a herf="#Download Center">Download Center</a>
        </li>

        <li>
            <a herf="#About">About</a>
        </li>
    </ul>
</nav>

【讨论】：