HTML上的颜色覆盖img

/* 确保覆盖层完全覆盖图片 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
}

<div class="image-container">
  <img src="example.jpg" alt="Example Image">
  <div class="overlay"></div>
</div>

.image-container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 50px; /* 根据需要调整位置 */
  left: 50px; /* 根据需要调整位置 */
  width: 100px; /* 根据需要调整尺寸 */
  height: 100px; /* 根据需要调整尺寸 */
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
}

img {
  filter: brightness(1.2) contrast(1.2) saturate(1.5); /* 调整亮度、对比度和饱和度 */
}