opacity在会适用于整个元素,不仅对自己生效,还会影响子元素的透明度
如果background搭配opacity会使得子元素以及内容都变成相应的透明度;
background如果只想用于背景而不想影响其中文字的透明度,应选择:
background:rgba(r,g,b,a)
opacity:不透明度,从 0(完全透明)到 1(完全不透明),默认为1。
rgba(r,g,b,alpha): alpha从 0(完全透明)到 1(完全不透明);
常用颜色:background: rgba(0, 0, 0, 0.5);黑色50%
background:rgba(255, 255, 255, 0.5);白色50%
修改前(background+opacity):
修改后(div盒子background: rgba(0, 0, 0, 0.5); 可给里面的文字加span标签,设置文字单独的透明度):