如何使用CSS实现参考示例中的图片标题覆盖层样式？

你现有的代码存在三处影响效果的问题：

• 固定200px高度、bottom设置为负值，导致半透黑层偏移到图片外部，没有覆盖在图片底部区域
• 给整个容器设置opacity属性，会导致内部的标题文字也被半透明处理，可读性变差
• 未设置宽度占比，无法铺满整个图片的底部宽度

调整后的代码如下：

/* 半透标题层样式 */
.av-image-caption-overlay{
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  padding: 12px 20px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* 图片外层父容器需要添加的定位属性，替换成你实际使用的父容器类名即可 */
.av-image-parent-container {
  position: relative !important;
}

修改说明：

• 新增position: absolute属性，配合父容器的position: relative，保证半透层是相对于图片进行定位，不会跑飞
• bottom属性改为0，让半透层紧贴图片底部，不会偏移到图片外
• 新增width: 100%属性，让半透层铺满整个图片的宽度
• 把固定高度改为height: auto，配合内边距padding实现高度自适应标题文字的长度，不会出现高度多余或者内容放不下的问题
• 背景色改为rgba格式，单独控制背景的透明度，不会影响内部的标题文字，同时删掉原来的opacity和filter属性，避免文字被半透明处理

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