css - CSS不透明度只对背景颜色，而不是文字就可以了？ [重复](CSS opacity only to background color, not the text on it? [duplicate])

Question

This question already has an answer here:

(这个问题在这里已有答案：)

• How do I give text or an image a transparent background using CSS?

  (如何使用CSS为文本或图像提供透明背景？)

  28 answers

  (28个答案)

Can I assign the opacity property to the background property of a div only and not to the text on it?

(我可以将opacity属性分配给div的background属性而不是它上面的文本吗？)

I've tried:

(我试过了：)

background: #CCC;
opacity: 0.6;

but this doesn't change the opacity.

(但这不会改变不透明度。)

  ask by Jay translate from so

Answer 1

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

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

rgba(R, G, B, A)

R (red), G (green), and B (blue) can be either <integer> s or <percentage> s, where the number 255 corresponds to 100%.

(R（红色），G（绿色）和B（蓝色）可以是<integer> s或<percentage> s，其中数字255对应于100％。)

A (alpha) can be a <number> between 0 and 1, or a <percentage> , where the number 1 corresponds to 100% (full opacity).

(A（α）可以是0到1之间的<number> ，或<percentage> ，其中数字1对应于100％（完全不透明度）。)

RGBa example (RGBa的例子)

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

A small example showing how rgba can be used.

(一个小例子，展示了如何使用rgba 。)

As of 2018, practically every browser supports the rgba syntax .

(截至2018年，几乎每个浏览器都支持rgba语法 。)