一:
backgrounde-color:rgba( ) 设置背景色的时候,可以调节背景色的透明度,注意是背景哦,所以不会存在遮罩问题。见图
#test .cover{ height: 100px; /* background-color: red; */ /* opacity: 0.8; */ margin-top: -100px; background-color: rgba(255,0,0,0.8) 还有因为background-color:rgba() 中的透明度是控制背景色的透明度,而opacity是控制当前元素的透明度。 } 而下面这种情形会存在遮罩问题哦!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
#test .cover{ height: 100px; background-color: red; opacity: 0.8; margin-top: -100px; /* background-color: rgba(255,0,0,0.8) */ } 二: background-color 与 background-imge无无法共存 图片的层级更高