您设置了<img>元素的background，但这不起作用，因为background仅在图像透明或丢失的情况下可见。您可以使用:after或:before在图像顶部创建一个新的覆盖层，使用rgba创建一个半透明的background。
您可以在.item或.carousel-inner上使用伪类来使图像变暗，而不影响文本。

.item:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.6);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img class="slide" src="http://placehold.it/800x300" alt="first slide">
    <div class="container">
      <div class="carousel-caption">
        <h1>Welcome to GroupWrites.</h1>
        <p>Where creative writing meets social media. Discover our community of writers and readers and experience social writing.</p>
        <p><a class="btn btn-lg btn-primary" href="/register" role="button">Sign up today</a></p>
      </div>
    </div>
  </div>
</div>

在img上设置一个background-image是行不通的，因为，当然，背景图像在背景中!它被实际的图像所掩盖。
你需要做的是在你的图片上覆盖一个半透明的背景，你可以通过为图片的父div设置一个background，并确保它比图片本身有一个更高的z-index来实现。

.item {
  width: 400px;
  height: 300px;
}
.item.active {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
}
.item .slide {
  position: relative;
  z-index: -1;
  width: 400px;
  height: 300px;
}

<div class="item">
  <img class="slide"  src="http://placehold.it/400x300" alt="First slide">
</div>
<div class="item active">
  <img class="slide"  src="http://placehold.it/400x300" alt="First slide">
</div>

你需要把它加到你的CSS里

.carousel-caption{
  width:100%;
  height:100%;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.2);
}

下面是实际实现的JSfiddle链接。https://jsfiddle.net/ghayyourspyko/tc0ksnex/1/
另一种做法如下

.item{
Position:relative;
}
.item:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.6);
}

下面是实际实现此功能的JsFiddle链接。https://jsfiddle.net/ghayyourspyko/jscgdLdu/1/

在Bootstrap 5 carousel上加深背景图像的一种方法是使用“：：before”伪元素，并在图像顶部应用带有透明黑色背景色（rgba（0，0，0，0.5））的线性渐变叠加。
您可以将以下CSS添加到轮播项目：

.item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

body{
  font-family:calibri;
}

div {
  width:200px;
  padding:20px;
  color:#fff;
  position:relative;
  text-align:center;
}

div img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:180px;
  z-index:-1;
  border-radius:8px;
  filter:brightness(40%); /* You can try with filter to give darkness to each image */
}

<div>
 <img src="//picsum.photos/250" />
 <h2>Heading</h2>
 <p>This is my first paragraph</p>
 </div>

你好，你可以试试滤镜brightness来调整图像的暗度。我希望这对你的问题也有帮助。