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

Question

推荐开发人员，

我是网站开发的新手，我想对英雄有一个轮播效果，所以我从this site复制了它，但这很酷。

我想通过在两边添加线性渐变为(0,0,0,0.7)的背景图像来降低英雄的不透明性，

所以我删除了src标签，并在div标签中添加了图片链接，但是，它似乎不起作用，图片没有显示在页面上。

这是我的代码

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

帮帮我..

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);
}  

我希望它将对您有帮助

Answer 2

您使用的样式属性应该可以使用，但看起来还是一团糟，为了实现所需的功能，您必须删除所有内容并使用getbootstrap.com轮播引用和通过添加以下代码，您想要的效果将起作用。

<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));">

github上还有一个更酷的响应式轮播效果存储库，称为 Owl Carousel ，它们还包括如何对轮播提供不同的效果，例如： swipe 拖动 从右向左连续循环，并且完全可自定义将其签出，这很酷。