Question

我希望在70％不透明背景下使图像不透明。我正在研究tboxsolutionz.com/dev12345

单击“投资组合”项目时，将加载div（下面给出该div的代码）

<div class="portfolio-modal modal fade transparent-background in" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in" style="height: 846px;"></div>
  <div class="modal-content">
  <!--  <div class="close-modal" data-dismiss="modal">
      <div class="lr">
        <div class="rl"> </div>
      </div>
    </div>-->
    <div class="container containerport">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <div class="modal-body"> 
            <!-- Project Details Go Here -->
            <h2>Monster Mischief</h2>
            <!--<p class="item-intro">Monster is up to a bit of mischief in the new endless runner game built for the pros & casual game players. Monster Mischief is insanely easy to pick up and play with a simple tap to control system. Simply navigate Monster through the obstacles while picking up sweet upgrades along the way to pimp out your character. Available now for your iPhone, iPod, & iPad.</p>-->
            <img class="img-responsive img-centered" src="img/portfolio/image11.jpg" alt="">
         <p class="zoom-text">Monster is up to a bit of mischief in the new endless runner game built for the pros &amp; casual game players. Monster Mischief is insanely easy to pick up and play with a simple tap to control system. Simply navigate Monster through the obstacles while picking up sweet upgrades along the way to pimp out your character. Available now for your iPhone, iPod, &amp; iPad.</p>
            <ul class="list-inline">
              <!--<li><strong>Client</strong>: John Doe</li>
              <li><strong>Category</strong>: Web Design</li>-->
              <li><a href="https://itunes.apple.com/us/app/monster-mischief/id852235026?mt=8" target="_blank"><img src="img/portfolio/App_Store.png" width="120" style="float:right;margin-right: 10px;" align="bottom"></a>
                            </li>
            </ul>
            <button type="button" class="btn btn-primary centered" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我已经尝试了css和html的几个方面，包括z-index，使图像的背景变白但没有任何工作

Answer 1

尝试向图片提供opacity:0.1;或尝试使用相同的不透明度叠加div。

Answer 2

我按照造型

做到了

.fade.in
 {background-color:rgba(181,181,181,0.7)}
 .modal-content
 { z-index:15;
   background-color: white
  }

但这使得内容的背景为白色，休息区域透明

在透明背景的不透明的图象

2 个答案: