純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