Because mdb-card is a component by itself, it hides the styles from the containing component, unless they are global (as in your case) Meaning, I cannot manage to set the transparent background in the component that holds the mdb-card, scss file, unless I use (::ng-deep) and this is what I was missing !!

Dear mdb2,

You have to do something wrong.

I have copied the exact code which I have pasted you, and here's the output: https://screenshots.firefox.com/ojQlmLdha3hzL0Ch/localhost

The .card styles are applied to the mdb-card element, because in it, there's the div with .card class. So those styles will be applied to the mdb-card element.

If you're sure, that you're doing everything okay, could you please send me your app via email? I would like to debug it. Here's my email address: d.gemza@mdbootstrap.com

Best Regards,

Damian

It is the same code from the example but it doesn't work https://mdbootstrap.com/docs/angular/sections/intros/#v-5

Try to implement it in the example https://mdbootstrap.com/previews/docs/latest/html/intros/intro-register-classic-form.html

This css rule cannot be used inside the "card" element created by mdb-card .card { background-color: rgba(126, 123, 215, 0.2); } so there is no way to add a transparent background to the inner card element

Check this screenshot: https://imgur.com/a/vSGzdns

Dear mdb2,

Please use the below code. There's everything good.

.html:

<!-- Main navigation -->
<header>
  <!--Navbar-->
  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
    <mdb-navbar-brand>
      <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>MDB</strong></a>
    </mdb-navbar-brand>
    <links>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Profile</a>
        </li>
      </ul>
      <form class="form-inline">
        <div class="md-form my-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </links>
  </mdb-navbar>
  <!-- Full Page Intro -->
  <div class="view" style="background-image: url('http://mdbootstrap.com/img/Photos/Others/images/91.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
    <!-- Mask & flexbox options-->
    <div class="mask rgba-gradient d-flex justify-content-center align-items-center">
      <!-- Content -->
      <div class="container">
        <!--Grid row-->
        <div class="row mt-5">
          <!--Grid column-->
          <div class="col-md-6 mb-5 mt-md-0 mt-5 white-text text-center text-md-left">
            <h1 class="h1-responsive font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
            <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
            <h6 class="mb-3 wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing
              elit. Rem repellendus quasi fuga
              nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea
              dolor molestiae, quisquam iste, maiores. Nulla.</h6>
            <a mdbBtn color="white" outline="true" mdbWavesEffect class="wow fadeInLeft" data-wow-delay="0.3s">Learn
              more</a>
          </div>
          <!--Grid column-->
          <!--Grid column-->
          <div class="col-md-6 col-xl-5 mb-4">
            <!--Form-->
            <mdb-card class="wow fadeInRight" data-wow-delay="0.3s">
              <mdb-card-body>
                <!--Header-->
                <div class="text-center">
                  <h3 class="white-text">
                    <i class="fas fa-user white-text"></i> Register:</h3>
                  <hr class="hr-light">
                </div>
                <!--Body-->
                <div class="md-form">
                  <i class="fas fa-user prefix white-text active"></i>
                  <input type="text" id="form3" class="text-white form-control" mdbInput>
                  <label for="form3" class="text-white">Your name</label>
                </div>
                <div class="md-form">
                  <i class="fas fa-envelope prefix white-text active"></i>
                  <input type="email" id="form2" class="text-white form-control" mdbInput>
                  <label for="form2" class="text-white">Your email</label>
                </div>
                <div class="md-form">
                  <i class="fas fa-lock prefix text-white active"></i>
                  <input type="password" id="form4" class="text-white form-control" mdbInput>
                  <label for="form4" class="text-white">Your password</label>
                </div>
                <div class="text-center mt-4">
                  <button mdbBtn color="indigo" mdbWavesEffect>Sign up</button>
                  <hr class="hr-light mb-3 mt-4">
                  <div class="inline-ul text-center d-flex justify-content-center">
                    <a class="p-2 m-2 tw-ic">
                      <i class="fab fa-twitter white-text"></i>
                    </a>
                    <a class="p-2 m-2 li-ic">
                      <i class="fab fa-linkedin-in white-text"> </i>
                    </a>
                    <a class="p-2 m-2 ins-ic">
                      <i class="fab fa-instagram white-text"> </i>
                    </a>
                  </div>
                </div>
              </mdb-card-body>
            </mdb-card>
            <!--/.Form-->
          </div>
          <!--Grid column-->
        </div>
        <!--Grid row-->
      </div>
      <!-- Content -->
    </div>
    <!-- Mask & flexbox options-->
  </div>
  <!-- Full Page Intro -->
</header>
<!-- Main navigation -->
<!--Main Layout-->
<main>
  <div class="container">
    <!--Grid row-->
    <div class="row py-5">
      <!--Grid column-->
      <div class="col-md-12 text-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
          anim id est laborum.</p>
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>
</main>

.scss:

/* Required for full background image */

html,
body,
header,
.view {
  min-height: 100vh;
}

@media (max-width: 740px) {
  html,
  body,
  header,
  .view {
    height: 1000px;
  }
}
@media (min-width: 800px) and (max-width: 850px) {
  html,
  body,
  header,
  .view {
    height: 650px;
  }
}

.top-nav-collapse {
  background-color: #3f51b5 !important;
}

.navbar:not(.top-nav-collapse) {
  background: transparent !important;
}

@media (max-width: 991px) {
  .navbar:not(.top-nav-collapse) {
    background: #3f51b5 !important;
  }
}

.rgba-gradient {
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
}

.card {
  background-color: rgba(126, 123, 215, 0.2);
}

.md-form label {
  color: #ffffff;
}

h6 {
  line-height: 1.7;
}

Best Regards,

Damian