调整模态背景不透明度而不调整模态本身的背景

Question

我正在使用 Bootstrap，并用它创建了一个模式。默认情况下，模态的背景（模态周围的区域）是褪色的，我可以降低它的不透明度，但模态本身的不透明度也会降低（我不想要）。请参阅下面的屏幕截图，以更清楚地了解我的意思。

我试过这个：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-backdrop"></div> <!------ closing div here ------>
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

并使modal-backdrop 相对定位和modal-content 绝对定位：

.modal-content {
    height: 750px;
    opacity: 1;
    position: absolute;
}

.modal-backdrop {
    background-image: url("/SiteAssets/Images/45_popup_background.jpg");
    opacity: 0.5;
    position: relative;
}

但它使.modal-backdrop 完全消失了。

对这个有什么想法吗？

这是一个screenshot，显示模态背景和模态本身已褪色。

Answer 1

您可以使用以下方法更改背景：

.modal-backdrop {
  opacity: 0.25 !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, corporis consectetur odit fuga incidunt nostrum soluta qui voluptatem iusto illo aperiam ex voluptatum, dolores reprehenderit temporibus repellendus voluptates velit corrupti!l</p>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
    Launch demo modal
</button>


<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, corporis consectetur odit fuga incidunt nostrum soluta qui voluptatem iusto illo aperiam ex voluptatum, dolores reprehenderit temporibus repellendus voluptates velit corrupti!l</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, corporis consectetur odit fuga incidunt nostrum soluta qui voluptatem iusto illo aperiam ex voluptatum, dolores reprehenderit temporibus repellendus voluptates velit corrupti!l</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, corporis consectetur odit fuga incidunt nostrum soluta qui voluptatem iusto illo aperiam ex voluptatum, dolores reprehenderit temporibus repellendus voluptates velit corrupti!l</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, corporis consectetur odit fuga incidunt nostrum soluta qui voluptatem iusto illo aperiam ex voluptatum, dolores reprehenderit temporibus repellendus voluptates velit corrupti!l</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, corporis consectetur odit fuga incidunt nostrum soluta qui voluptatem iusto illo aperiam ex voluptatum, dolores reprehenderit temporibus repellendus voluptates velit corrupti!l</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, corporis consectetur odit fuga incidunt nostrum soluta qui voluptatem iusto illo aperiam ex voluptatum, dolores reprehenderit temporibus repellendus voluptates velit corrupti!l</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, corporis consectetur odit fuga incidunt nostrum soluta qui voluptatem iusto illo aperiam ex voluptatum, dolores reprehenderit temporibus repellendus voluptates velit corrupti!l</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, corporis consectetur odit fuga incidunt nostrum soluta qui voluptatem iusto illo aperiam ex voluptatum, dolores reprehenderit temporibus repellendus voluptates velit corrupti!l</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, corporis consectetur odit fuga incidunt nostrum soluta qui voluptatem iusto illo aperiam ex voluptatum, dolores reprehenderit temporibus repellendus voluptates velit corrupti!l</p>



<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">CUSTOM LINK MAKER</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="inputEmail4">Email</label>
              <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
            </div>
            <div class="form-group col-md-6">
              <label for="inputPassword4">Password</label>
              <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
            </div>
          </div>
          <div class="form-group">
            <label for="inputAddress">Address</label>
            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
          </div>
          <div class="form-group">
            <label for="inputAddress2">Address 2</label>
            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="inputCity">City</label>
              <input type="text" class="form-control" id="inputCity">
            </div>
            <div class="form-group col-md-4">
              <label for="inputState">State</label>
              <select id="inputState" class="form-control">
                <option selected>Choose...</option>
                <option>...</option>
              </select>
            </div>
            <div class="form-group col-md-2">
              <label for="inputZip">Zip</label>
              <input type="text" class="form-control" id="inputZip">
            </div>
          </div>
          <div class="form-group">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="gridCheck">
              <label class="form-check-label" for="gridCheck">
                                Check me out
                            </label>
            </div>
          </div>
          <button type="submit" class="btn btn-primary">Sign in</button>
        </form>

      </div>
    </div>
  </div>
</div>