title: Make bootstrap carousel background transparent
body: <p>I am a newbie in CSS , and I wanted to make a carousel transparent on top of the colored div, how can I achieve this ?</p>
  
  <p>Below is my current results :
  <a href="https://i.stack.imgur.com/1VkR6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1VkR6.png" alt="enter image description here"></a></p>
  
  <p>Then this is my <code>html</code> code :</p>
  
  <pre><code>&lt;div class="second-phase"&gt;
          &lt;!-- Tab for Carousel--&gt;
          &lt;div id="products-page-carousel"&gt;&lt;/div&gt;
  
          &lt;!--Carousel View--&gt;
          &lt;div id="carousel" class="carousel slide"  data-ride="carousel"&gt;
  
              &lt;!-- The slideshow --&gt;
              &lt;div class="carousel-inner" &gt;
                  &lt;div class="carousel-item active" id="my-carousel-bg" &gt;
                      &lt;center&gt;
                          &lt;img src="/media/g01hgi0m/branded-basin.png" alt="Los Angeles" width="30%" height="30%"&gt;
                      &lt;/center&gt;
                  &lt;/div&gt;
                  &lt;div class="carousel-item" id="my-carousel-bg"&gt;
                      &lt;center&gt;
                          &lt;img src="/media/waqd3xdw/branded-milk-crate.png" alt="Chicago" width="10%" height="10%"&gt;
                      &lt;/center&gt;
                  &lt;/div&gt;
                  &lt;div class="carousel-item" id="my-carousel-bg"&gt;
                      &lt;center&gt;
                          &lt;img src="/media/g01hgi0m/branded-basin.png" alt="New York" width="30%" height="30%"&gt;
                      &lt;/center&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Left and right controls --&gt;
              &lt;a class="carousel-control-prev" href="#carousel" data-slide="prev"&gt;
                  &lt;img src="/media/aqrnoaxe/asset-1.png" width="17%"/&gt;
              &lt;/a&gt;
              &lt;a class="carousel-control-next" href="#carousel" data-slide="next"&gt;
                  &lt;img src="/media/xqwj1jpx/asset-3.png" width="17%"/&gt;
              &lt;/a&gt;
          &lt;/div&gt;    
      &lt;/div&gt;
  </code></pre>
  
  <p>Then, also my <code>CSS</code> is here :</p>
  
  <pre><code>.second-phase{
      margin-top: -170px;
      height: 700px;
  }
  #my-carousel-bg{
      background-color: transparent;
      opacity: 2;
  }
  </code></pre>
  
  <p>This is how my output is supposed to be :</p>
  
  <p><a href="https://i.stack.imgur.com/nAm5H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nAm5H.png" alt="enter image description here"></a></p>