css checkbox设置透明_使用CSS的opacity属性设置透明度时踩坑

opacity

使用CSS的opacity属性设置透明度时踩坑：

如果父元素有opacity属性，那么无论如何，子元素都会继承这个属性，

.header-banner-item{
  opacity: 0.8;
  &.sign{
    position: relative;
    .calender{
      position: absolute;
      opacity: 1 !important;
    }
  }
}

即便加上 !important 也无济于事

除非，子元素的opacity值小于父元素才能生效

.header-banner-item{
  opacity: 0.8;
  &.sign{
    position: relative;
    .calender{
      position: absolute;
      opacity: .3 !important;
    }
  }
}

只能比父元素更透明

解决办法：使用rgba的a值来设置透明度

.header-banner-item{
  color: rgba(255,255,255,.8)
  &.sign{
    position: relative;
    .calender{
      position: absolute;
      background-color: rgba(255,255,255,1)
    }
  }
}