如何用CSS在WordPress文章网格的特色图片上叠加标题和摘要

因为你用的是WordPress的Query Loop块，直接通过自定义CSS就能实现需求，以下是具体代码和说明：

核心CSS代码 #

/* 每个文章项设置相对定位，作为内部元素绝对定位的参考容器 */
.wp-block-post {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem; /* 网格列之间的间距，可自行调整 */
}

/* 让特色图占满容器，保持统一尺寸 */
.wp-block-post-featured-image img {
  width: 100%;
  height: 300px; /* 替换成你实际的图片高度 */
  object-fit: cover; /* 保持图片比例，自动裁剪多余部分 */
}

/* 标题+摘要容器：定位在图片底部，加渐变遮罩提升文字可读性 */
.wp-block-post__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem; /* 文字和容器边缘的距离，可调整 */
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: #ffffff;
}

/* 标题样式调整 */
.wp-block-post-title a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2rem; /* 标题字号，按需修改 */
}

.wp-block-post-title a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线，可选 */
}

/* 摘要样式调整 */
.wp-block-post-excerpt p {
  margin: 0.5rem 0 0; /* 摘要和标题的间距 */
  font-size: 0.9rem; /* 摘要字号，按需修改 */
  opacity: 0.9; /* 降低摘要透明度，突出标题 */
}

注意事项 #

• 如果你给Query Loop或文章项加了自定义类名，需要把代码里的默认类（比如.wp-block-post）替换成你实际使用的类名。可以通过浏览器右键「检查元素」查看对应元素的class。
• 图片高度height:300px请替换成你实际的统一图片高度。
• 渐变遮罩的透明度（rgba(0,0,0,0.8)里的0.8）可以调整，数值越小遮罩越浅。
• 把这段代码添加到子主题的style.css文件中，或者WordPress后台「外观-自定义-额外CSS」面板里。

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