WordPress Astra主题：如何实现固定高度图片叠加文字效果？

方法一：自定义Cover块样式（解决拉伸问题） #

• 插入Cover块，添加目标背景图片
• 在块设置「尺寸」中，关闭「全屏高度」，将「最小高度」设为你需要的固定值（如300px），避免图片过度拉伸
• 在Cover块内添加标题/段落块，选中文字块后，在「高级」设置里添加自定义CSS类（比如green-bg-text）
• 进入Astra主题「自定义」→「附加CSS」，粘贴以下代码（替换绿色方形图的媒体库URL）：

.green-bg-text {
  background: url('你的绿色方形图URL') no-repeat center;
  background-size: cover;
  padding: 15px 20px;
  display: inline-block;
}

方法二：原生Group+Image+Text组合（无插件） #

• 插入Group块，在「尺寸」设置中：
  • 设「最小高度」为固定值（如300px）
  • 开启「溢出」为「隐藏」
  • 添加自定义CSS类image-overlay-group
• 在Group块内插入Image块，上传背景图片，然后在「高级」设置添加自定义CSS类bg-image
• 接着插入标题/段落块，添加自定义CSS类green-bg-text（和方法一的类名一致，复用CSS）
• 到主题「自定义」→「附加CSS」添加代码：

.image-overlay-group {
  position: relative;
}
.image-overlay-group .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}
.image-overlay-group > .wp-block-heading, .image-overlay-group > p {
  position: relative;
  z-index: 1; /* 确保文字在图片上方 */
}
.green-bg-text {
  background: url('你的绿色方形图URL') no-repeat center;
  background-size: cover;
  padding: 15px 20px;
  display: inline-block;
}

方法三：用Spectra插件实现 #

• 插入Spectra的Advanced Columns块，设置列的「固定高度」（Spectra支持固定高度设置）
• 在列内插入Cover块，添加背景图片，关闭全屏高度，调整到合适尺寸
• 在Cover块内添加文字块，给文字块加自定义CSS类，复用方法一的绿色背景CSS代码

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