前端 - css中关于设置透明度的问题，有点混乱

Question

background:#000;
opacity:0.8;
filter:alpha(opacity=80);
background:rgba(255,255,255,0.8);
弄不清楚这几个的关系

Answer 1

background:#000Set background:

opacity:0.5;Set transparency, but it will affect child nodes:

filter:alpha(opacity=80); Mainly used for image processing and filters.

css3filter

background:rgba(0,0,0,0.5);Set background transparency, which will not affect child nodes

Answer 2

Add to the accepted answer above:

1. background:#000; and background:rgba(255,255,255,0.8);: Both are background background attributes, but the values ​​are expressed in different ways. #000 and rgba(255,255,255,0.8) are two different attribute values. The former is a hexadecimal value and the latter is an rgba value. a=alpha is used to represent opacity. 0.8 is written as .8 which is more professional. rgba is a new method added to CSS3, so pay attention to compatibility. Other commonly used color value methods include rgb. For more details, you can see the color value on the w3c official website. I am too lazy to post the link.

2. filter:alpha(opacity=80); and opacity:0.8;: Both can be used to set opacity. The former is a private attribute filter of IE. Because IE is not compatible with the latter writing method, the filter method is used to disguise it. To achieve the purpose of setting opacity.

Answer 3

background:rgba(0,0,0,0.5); sets background transparency and will not affect child nodes

Answer 4

More precisely, background-color:#FFF; is better than background: #FFFThis abbreviation of background is more suitable for background :url(path) center center no-repeat This kind of.