opacity属性的继承问题

在给父元素设置了opacity属性之后,想重新给子元素设置不同值的opacity,结果不生效

解决方法一:

对于父元素只是在背景颜色上设置的透明度,可以用

background: rgba(0,0,0,.7)

代替

opacity: 0.5;

解决方法二:

父元素是在图片背景上设置的透明度

可以将背景图片和内容利用定位设置在同一位置不同层级,再分别设置透明度,即不让目标元素成为父子关系

父元素 {
  position: absolute;
  background: url("");
  opacity: 0.5;
  z-index: 1
}
子元素 {
  position: relative;
  opacity: 1;
  z-index: 2;

}

 


上一篇:Vue中的列表过渡


下一篇:CSS:display、visibility、opacity 的详解 与比较