如何在HTML、CSS中仅降低背景透明度而不影响文本？

问题出在你用了opacity属性——这个属性会让**整个元素（包括文本和背景）**都变得透明，所以才会出现背景和文本一起变淡的情况。

要实现仅背景透明、文本保持不透明，有两种简单方法：

方法1：使用RGBA颜色值 #

直接把background-color的rgb()改成rgba()，第四个参数就是透明度（范围0-1），这样只有背景色会应用透明度，文本不受影响。

修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    #h1{
        background-color: rgba(81, 5, 151, 0.8); 
        /* 移除原来的opacity属性 */
    }
</style>
</head>
<body>
    <h1 id="h1">Change only background opacity not text. When I am run this code it has shown  me both opacity decrease background and text.</h1>
</body>
</html>

方法2：使用HSLA颜色值 #

如果你习惯用色相、饱和度、亮度的颜色模式，也可以用hsla()，第四个参数同样是透明度：

#h1{
    background-color: hsla(271, 91%, 31%, 0.8);
}

这两种方法都能精准控制背景的透明度，同时让文本保持完全不透明的状态。

内容的提问来源于stack exchange，提问作者Aman Khurshid