为什么按钮看起来是透明的？我应该如何使其不透明？

Question

该按钮的背景图像不透明度为 0。在背景图像的顶部，有一个不透明度为 0.54 的黑色面板，按钮位于黑色面板的顶部。请告诉我。我花了几个小时使按钮不透明。请在此处找到按钮的图片。非常感谢任何形式的帮助。提前致谢。

<body>
    <header class="admin-header border-blue">
        <div class="admin-background-overview">
            <div class="admin-black-panel border-yellow" align="center">
                <div class="admin-black-panel border-yellow" align="center"><!-- this is the black panel-->
                    <button class="btn btn-success btn-block admin-login-form-button roboto-light-font" id="admin-contact-button-id">LOG IN</button><!--this is the main button-->
                </div>
            </div>
      </div>
</header>

    <style>
    .admin-header {
        background-image: image-url('bg.jpg');  <!-- this is the bg image-->
        background-repeat: no-repeat;
        background-position: center;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-position: top;       /* The image will shift a little up if we do not insert this line*/
        background-size: 100vw 100%;
    }

    .admin-background-overview {
      /* Provides cross-browser RGBa background */
      zoom: 1;
      background: transparent;
      background: rgba(0, 0, 0, 0) !important;
      //z-index: -1;
    }

    .admin-black-panel {
      width: 1392px;
      height: 374px;
      opacity: 0.54;
      margin-left: -130px;
      background-color: #000000;
    }

    .admin-login-form-button {
      /*outline: 1px solid orange;*/
      //font-family: Roboto-Light;
      font-size: 14px;
      line-height: 1.4em;
      letter-spacing: 2px;
      text-align: center;
      color: #ffffff;
      background-color: #21d392;
      width: 100%;
      height: 50px;
      border-radius: 0 0px 0px 0;
      border: none;
      text-align: center;
      vertical-align: middle;
    }

    .admin-login-form-button:hover, .admin-login-form-button:focus {
      background-color: #21d392;
      color: #ffffff;
    }

    .admin-login-form-button:active {
      background-color: #21d392;
      color: #ffffff;
    }

    .admin-login-form-text-box:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px black inset !important;
      -webkit-text-fill-color: white;
    }
</style>

Answer 1

这是因为父级的不透明度为 0.54，这会淡化父级 及其所有子级 。

一旦设置了不透明度，就无法通过将样式应用于子项来覆盖它。

.admin-black-panel {
  height: 374px;
  /* opacity: 0.54; */ /* remove this */
  background-color: #000000;
}

.admin-header {
  background-image: image-url('bg.jpg');
  <!-- this is the bg image--> background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: top;
  /* The image will shift a little up if we do not insert this line*/
  background-size: 100vw 100%;
}
.admin-background-overview {
  /* Provides cross-browser RGBa background */
  zoom: 1;
  background: transparent;
  background: rgba(0, 0, 0, 0) !important;
  //z-index: -1;

}
.admin-black-panel {
  height: 374px;
  /* opacity: 0.54; */
  background-color: #000000;
}
.admin-login-form-button {
  /*outline: 1px solid orange;*/
  //font-family: Roboto-Light;
  font-size: 14px;
  line-height: 1.4em;
  letter-spacing: 2px;
  text-align: center;
  color: #ffffff;
  background-color: #21d392;
  width: 100%;
  height: 50px;
  border-radius: 0 0px 0px 0;
  border: none;
  text-align: center;
  vertical-align: middle;
}
.admin-login-form-button:hover,
.admin-login-form-button:focus {
  background-color: #21d392;
  color: #ffffff;
}

<header class="admin-header border-blue">
  <div class="admin-background-overview">
    <div class="admin-black-panel border-yellow" align="center">
      <div class="admin-black-panel border-yellow" align="center">
        <!-- this is the black panel-->
        <button class="btn btn-success btn-block admin-login-form-button roboto-light-font" id="admin-contact-button-id">LOG IN</button>
        <!--this is the main button-->
      </div>
    </div>
  </div>
</header>

而不是对面板应用不透明度（除非您有特定原因）使用 RGBA/HSLA color 作为您的背景。

为什么按钮看起来是透明的？我应该如何使其不透明？

Why is the button looking transparent? How should I make it opaque?

html

css

background

button

background-image