纯css实现背景图片半透明内容不透明的方法-opacity属性正确使用

效果图如下

<div class="bottom-transparent">
  <div class="btn-area flex">
    <el-button type class="search_but">企业招聘需求快速登记</el-button>
    <div class="msg">已有帐号快速，立即登录？</div>
    <svg-icon icon-class="cancel" class="icon icon-svg-cancel" />
  </div>
</div>

效果不佳的CSS即opacity错误用法,会把左侧背景图标编程透明, 中间按钮颜色失真

.bottom-transparent {
  height: 180px;
  width: 100%;
  background: rgba(0, 0, 0, 1) url("/static/img/icon_flat-big.png");
  background-repeat: no-repeat;
  background-position: 5% 50%;
  bottom: 0;
  margin-bottom: 2px;
  position: fixed;
  z-index: 100;
  opacity: 0.6;
}

有幸查到一篇正解,并且实践有效 参考

使用SASS, 关键CSS 第11~22, 第19行 

一定要设置position:absolute,这样才能设置z-index，让背景处于内容的下一层

// 底部透明条
.bottom-transparent {
  height: 180px;
  width: 100%;
  background: url("/static/img/icon_flat-big.png");
  background-repeat: no-repeat;
  background-position: 5% 50%;
  bottom: 0;
  margin-bottom: 2px;
  position: fixed;
  .btn-area::before {
    content: "";
    background: rgba(0, 0, 0, 1);
    opacity: 0.6; /* 透明度设置 */
    z-index: -1;
    background-size: 500px 300px;
    width: 100%;
    height: 180px;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .btn-area {
    height: 180px;
    justify-content: center;
    align-items: center;
    .msg {
      opacity: 1;
      font-size: 16px;
      color: #fff;
      margin-right: 20px;
    }
    .icon {
      &.icon-svg-cancel {
        font-size: 36px;
        color: #000;
      }
    }
  }

其它知识点: CSS3 中 伪元素::before

开发环境 vue 、 vue element UI