如何在引导程序中向轮播添加背景图像

Question

Respected Devs,

I'm new to website development, I wanted to have a carousel effect on hero, so I copied it from this site , it's cool though.

I want to reduce the opacity of the hero by adding background-image with linear-gradient of (0,0,0,0.7) on both sides to have effect like this,

so I removed the src tag and added the image link in div tag, But, it dosen't seem to work, the image doesn't show up on page.

Here's my code

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-image: url('image/must.jpg'), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));">
      <!--<img src="image/must.jpg" class="d-block w-100" alt="...">-->
    </div>
    <div class="carousel-item">
      <img src="image/shelby1.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

help me..

Answer 1

html:

 <div class="item">
          <img src="images/pic2.jpg" alt="pic 2">
          <div class="carousel-caption">
            <h1>Web Desgin</h1>
         </div>
            </div>

css:

.item img {
    position: absolute;
    object-fit:cover;
    width: 100%;
    top: 0;
    left: 0;
    min-height: 572px;
    background:rgba(0,0,0,0.7);
}  

i hope it will help you

Answer 2

The style attributes you used should have worked, but it looks like you did a mess, anyway in order to achieve what you want you have to remove all the stuff and create one from scratch using getbootstrap.com carousel reference and the effect that you want will work by adding the below code.

<div class="carousel-item active" style="background-image: url('image/must.jpg'), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));">

There is also one more cool responsive carousel effect repository called Owl Carousel on github they also have included how to give different effects on carousel like: swipe drag right to left with continuous loop and it's fully customizable check it out, it's cool.