不透明图像在透明背景上

Question

I want to make image opaque over 70% opaque background. I am working on tboxsolutionz.com/dev12345

When Portfolio item is clicked a div is loaded (Code for that div is given below)

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

I have tried several aspects from css and html including z-index, making the background of the image white but nothing is working

Answer 1

try to give opacity:0.1; to the image or try overlay div with same opacity.

Answer 2

i did it by following styling

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

but this made the background of content white and rest area transparent