如何降低 HTML，CSS 中只有背景的不透明度？答案

【问题标题】：How to decrease the opacity of only background in HTML, CSS?如何降低 HTML，CSS 中只有背景的不透明度？
【发布时间】：2022-12-19 15:40:24
【问题描述】：

HTML当我运行这段代码时，它向我展示了不透明度降低的背景和文本。

<!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: rgb(81, 5, 151); 
        opacity: 0.8; 
    }
</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.<y /h1>  Here I have taken h1 and give id 
</body>
</html>

【问题讨论】：

background: rgba(0,0,0,.5);使用rgba然后4值就是背景不透明度

标签： html css

【解决方案1】：

听起来您想使用透明背景，在这种情况下，您可以尝试使用 rgba() 函数：

rgba(R, G, B, A)

R（红色）、G（绿色）和 B（蓝色）可以是 s 或 s，其中数字 255 对应于 100%。 A (alpha) 可以是介于 0 和 1 之间的 a 或 a ，其中数字 1 对应于 100%（完全不透明）。

RGBa 示例

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */

一个小的 example 展示了如何使用 rgba。

【讨论】：

【解决方案2】：

通过减小此值（例如 0.7 或 0.5）将帮助您更改背景图像的透明度或不透明度

【讨论】：

你说的是什么价值？这些只是没有出现在问题中的数字。