如何实现图片弹窗内图片说明文字的背景透明效果

你遇到的问题由三个错误导致：

1. #caption 样式中rgba参数使用错误：rgba第四个参数为透明度，取值范围是0~1，你设置为9.9等价于完全不透明的黑色
2. 存在多个重复的id="caption"，HTML规范中id唯一，重复会导致样式和JS选择器异常
3. 弹窗内容容器.modal-content默认是白色背景，即便caption设置透明也会透出白色背景，同时caption默认在图片下方，无法透出图片内容

修改步骤 #

所有修改不会改动你现有的table结构，符合项目要求：

• 第一步：删除所有mySlides内部的p#caption标签，只保留.caption-container内部的唯一#caption元素
• 第二步：调整对应CSS样式，修改#caption的背景色、定位，同时修改.modal-content为透明背景
• 第三步：给所有缩略图img添加alt属性，内容为需要展示的说明文字，修复JS赋值异常

修改后CSS片段 #

/* 原有modal-content样式只改背景色即可 */
.modal-content {
  position: relative;
  background-color: transparent; /* 替换原来的#fefefe */
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
  animation-name: zoom;
  animation-duration: 0.3s;
}
/* 替换原有#caption的全部样式 */
#caption {
  margin: 0;
  display: block;
  width: 100%; 
  text-align: center;
  color: #fff;
  padding: 10px 0;
  background-color: rgba(0,0,0,0.5); /* 透明度可根据需要调整0~1之间的数值 */
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
}

修改后JS片段 #

// 替换原有currentSlide函数
function currentSlide(n) {
  window.currentCaption = event.target.alt;
  showSlides(slideIndex = n);
}

// showSlides函数只修改最后一行赋值逻辑即可
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  // 替换原来的this.alt赋值
  captionText.innerHTML = window.currentCaption;
}

HTML修改说明 #

给所有点击触发弹窗的缩略图img标签添加alt属性即可，示例：

<img src="https://source.unsplash.com/user/erondu/100x100" width="250" height="164" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" alt="Annual function">

内容的提问来源于stack exchange，提问作者Sarkar