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

Question

The button has a background image having 0 opacity. On the top of the background image, there is a black panel with an opacity of 0.54 and the button is placed on the top of the black panel. Kindly let me know. I have spent hours to make the button opaque. Please find the image of the button here. Any kind of help will is really appreciated. Thanks in advance.

Login Button

<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>

@Savvy Opacity should definitely work. Apply opacity: 1.0 !important to your button — , Jul 14 '16 at 09:02

score 0 · Accepted Answer · edited May 23 '17 at 12:14

It's because the parent has an opacity of 0.54 which fades the parent and all it's children.

Once an opacity has been set it cannot be overridden by applying styles to the children.

.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>

Rather than apply an opacity to the panel (unless you have specific reasons) use an RGBA/HSLA color for your background.

Hi Paulie_D, it worked for me. Thank you very much. Appreciate your time and efforts :-) — Savvy, Jul 14 '16 at 19:00

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

1 Answers1