鼠标经过图片，图片上层加一个背景为黑色不透明度0.5的图层

要在鼠标经过图片时在图片上方添加一个背景为黑色不透明度为0.5的图层，你可以使用CSS的:hover伪类和绝对定位来实现。

首先，给每个图片容器添加一个共同的CSS类，例如.image-container。

<div class="owl-carousel">
  <div class="item">
    <div class="image-container">
      <img src="image1.png" alt="Image 1">
      <div class="overlay"></div>
    </div>
  </div>
  <!-- 其他图片容器 -->
</div>

在每个图片容器内部，我们添加了一个名为.overlay的<div>元素作为图层。

接下来，在CSS样式表中定义这些类：

.image-container {
   position: relative;
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5); /* 黑色背景不透明度为0.5 */
   opacity: 0; /* 初始时不显示 */
}

.image-container:hover .overlay {
   opacity:1; /* 鼠标经过时显示 */
}

上述代码中，我们首先将.image-container设置为相对定位，并将.overlay设置为绝对定位。然后通过设置宽度和高度都是100%来确保覆盖整个图片容器。我们使用 rgba(0, 0, 0, 0.5) 来设置黑色的背景颜色，并将不透明度设置为0.5。

最后，通过使用:hover伪类选择器，当鼠标经过.image-container时，我们将.overlay的不透明度设置为1，从而显示这个黑色半透明的图层。

这样，在鼠标经过图片时就会在图片上方添加一个背景为黑色不透明度0.5的图层。你可以根据需要调整样式和效果。