bootstrap-modal透明背景不透明文本

Question

我在使用背景不透明文本将bootstrap-modal设置为透明时遇到问题。我尝试将背景颜色设置为RGBA，但是，它仍会影响文本，使其现在具有相同的透明度。我尝试在以下内容中定义背景：.modal-open，.modal-dialog，.modal-content，.modal.in和.modal-dialog - 这些都不起作用。

HTML：

<!-- Modal -->

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div class="modal-title" id="myModalLabel"><h1>ZU</h1></div>
        <div class="modal-body">
          <p>Do Zore World Tour 2017</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde nihil enim aperiam illum nisi tenetur facere quidem possimus libero dolorum, vitae natus cumque? Dolor sapiente fugiat culpa repudiandae, earum quisquam.</p>
        </div>

        <!-- email sign up form w/ button -->
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <p><form class="form-inline">
                <div class="form-group">
                  <label for="email"></label>
                  <input type="email" class="form-control" id="email" placeholder="Email address*"><button type="submit" class="btn btn-default">Sign Up</button>
                </div>
                <div>
                </div>

              </form></p>  

          </form>

        </div>
      </div>

    </div>
    <!-- email sign up form w/ button -->

  </div>  
</div>

CSS：

/* modal pop up */
.modal-content {
    position: relative;
    background-color: rgba(250, 179, 0, 0,6;)!important;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

.modal.body{
  background-color: none;
}

.modal-title h1{ 
  font-family:;
  font-size: 20.854em;
  text-align: center;
  color:#fab300;
}

/* modal pop up */

Answer 1

我更新了CSS文件。请在这里查看codepen链接： https://codepen.io/sushantb/pen/mwvzdR?editors=0100

CSS文件现在看起来像这样：

    * {
  border-radius: 0 !important;

    }

    body {
        background-color: #000;
    }

    /* LINKS */
    a:hover {
    color: #ffcc4d !important;
    text-decoration: none;
    }

    a:visited {
    color: #fab300 !important;
    text-decoration: none;
    }
    /* LINKS */

    /* nav bar custom*/
    .navbar-inverse  {
    background-color: #000;
    padding-top: 0px;
    padding-bottom: 0px;
    border: none;
    padding: 0px;
    margin: 0px;
    }

    .navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #ffcc4d !important;  /*Sets the text hover color on navbar*/
    }

    .navbar-inverse .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
     a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #fab300 !important; /*BACKGROUND color for active*/
    }

    .navbar-toggle{
      position: relative;
        float: right;
        padding: 9px 10px;
        margin-top: 8px;
        margin-right: 15px;
        margin-bottom: 8px;
        background-color: transparent;
        background-image: none;
        border: 1px solid #fab300 !important;
        border-radius: 4px;
    }

    .navbar-inverse .navbar-toggle .sr-only .icon-bar{
      color: #fab300 !important;
    }

     /*.nav > li > a:hover,
     .nav > li > a:focus {
        text-decoration: none;
        background-color: silver; /*Change rollover cell color here
      }*/

    .navbar-inverse .navbar-nav > li > a {
       color: #fab300; /*Change active text color here*/
        }

    .navbar-inverse .navbar-brand > li > a:hover, .navbar-inverse .navbar-brand > li > a:focus {
    color: #ffcc4d !important;  /*Sets the text hover color on brand TO FIGURE OUT!!!*/
    }

    .navbar-inverse .navbar-brand > .active > a, .navbar-inverse .navbar-brand > .active >   
     a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #fab300 !important; /*BACKGROUND color for active brand TO FIGUER OUT!!!*/
    }
    /* nav bar custom*/

    /* type */
    body {
      background-color: white;
      font-family: Scope One;
      font-weight: 400;
      line-height: 1.45;
      color: #333;
    }

    p {margin-bottom: 1.3em;}

    p span {
      color: white;
      font-weight: 900;
    }

    h1, h2, h3, h4 {
      margin: 1.414em 0 0.5em;
      font-family: Scope One;
      font-weight: inherit;
      line-height: 1.2;
    }

    h1 {
      margin-top: 0;
      font-size: 6.854em;
    }

    h2 {font-size: 4.236em;}

    h3 {font-size: 2.618em;}

    h4 {font-size: 1.618em;}

    small, .font_small {font-size: 0.618em;}
    /* type */



    /* modal pop up rgba(250, 179, 0, 0,6;) */
    .modal-content {
        background-color: rgba(0,0,0,0.6)!important;
        position: relative;
        opacity: 1.0;
        border: 1px solid #999;
        border-radius: 50px;
        outline: 0;
       }

    .modal.body{
      background-color: green;
    }

    .modal-dialog {
      background-color: white;
    }

    .modal.in .modal-dialog {
      background-color: transparent;
    }
    .modal-title h1{ 
      font-family:calibri;
      font-size: 20.854em;
      text-align: center;
      color:#fab300;
      opacity: 1;
      padding-bottom:5px;
    }
    .modal-title h3{ 
      font-family:inherit;
      font-size: inherit;
      text-align: center;
      color:#fab300;
      padding-bottom:5px;
    }
    .modal-body h3, p{
        color: #fab300;
    }
    .modal-backdrop {
      background-color: transparent !important; /* I kept this to show the kind of transparent effect I would like to acheive on tge modal background */
    }

    /* email sign up form */
    .input .placeholder-shown{
      color:#fab300 !important;
    }
    .input .placeholder{
      color: #fab300;
    }
    .form-control{
     border-top: none;
     border-bottom: 1px solid #fab300;
     border-left: none;
     border-right: none;
     box-shadow: none !important;
     width: 65%;
    }

    .button, .input, .select, .textarea{
     color:#fab300 !important
     border-top: 1px solid #fab300 !important;
     border-bottom: 1px solid #fab300!important;
     border-left: 1px solid #fab300 !important;
     border-right: 1px solid #fab300 !important;
     box-shadow: none !important;
    }

    .form-inline .btn .btn-default{
     border-top: 1px solid #fab300 !important;
     border-bottom: 1px solid #fab300!important;
     border-left: 1px solid #fab300 !important;
     border-right: 1px solid #fab300 !important;
     box-shadow: none !important;
    }
    /* email sign up form */
    /* modal pop up rgba(250, 179, 0, 0,6;) */


    /* overlay */
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      transition: .5s ease;
      background-color: rgba(250, 179, 0,.2;)!important;
    }

    .container:hover .overlay {
      opacity: 1;
    }

    .text {
      color: #fab300;
      font-size: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }

    /* .overlay .btn .btn-primary .btn-lg{
    }*/

    /* CTA button color override */
    .btn-primary, .btn-primary:active, .btn-primary:visited, .btn-primary:focus {
        background-color: #fab300 !important;
        /* background-color: rgba(250, 179, 0,.6;)!important -- I WOULD LIKE TO HAVE IT TRANSPARENT*/  
        border-color: #fab300 !important; 
        font-family: 'Scope One', serif;
        font-color:#fff !important;
        font-size: 16px;
        font-style: bold;
        text-transform: none;
        color: white;
        vertical-align: center;
        text-align: center;
    }

    .btn-primary:hover{
      background-color: #ffcc4d !important; 
        border-color: #ffcc4d !important; 
    }

    /* overlay */

    /* Tour - Table */
    .table .table-inverse{
     border-spacing: 0;
     background-color: rgba(250, 179, 0,.6;);
    }

    .table .table-inverse .td {
      padding: 0;
    }


    /* Tour - Table */

请查看并还原。 问候， Sushant