get_the_post_thumbnail_url()无法显示特色图片作为页眉背景的问题

针对你遇到的特色图片无法显示为页眉背景图的问题，结合你的代码，从以下几个方面排查修复：

1. 容器无高度导致背景图无法展示 #

你的.featured-image容器未设置明确高度，仅靠子元素header的内边距撑高，可能因高度不足导致背景图无法正常显示。修改CSS：

.featured-image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* 替换contain，让背景图铺满容器，避免留白 */
    min-height: 300px; /* 设置最小高度，确保容器有足够空间承载背景图 */
    position: relative; /* 为子元素定位做准备 */
}

2. 图片URL格式问题+尺寸过小 #

原PHP函数输出的url()未加引号，若URL含特殊字符会解析失败；同时thumbnail尺寸过小，作为背景图易模糊。修改PHP函数：

function featured_img_url() {
    if (has_post_thumbnail() && is_singular()) {
        $gs_thumbnail_url = esc_url(get_the_post_thumbnail_url(get_post(), 'large')); // 改用large尺寸，esc_url确保URL安全合规
        echo 'background-image: url("' . $gs_thumbnail_url . '");';
    }
}

注：将重复的background-repeat、background-size属性移到外部CSS，避免内联样式与外部样式冲突

3. 子元素背景色遮挡背景图 #

你的header带有theme-bg-light类，若该类是不透明背景色，会完全挡住下方的背景图。修改CSS让header背景半透明：

.page-title.theme-bg-light {
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色，兼顾文字可读性与背景图展示 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

验证步骤 #

• 复制开发者工具中background-image的URL到新标签页，确认图片能正常打开
• 检查.featured-image的高度是否符合预期（通过开发者工具Elements面板查看盒模型）
• 排查是否有其他CSS规则覆盖了背景图相关属性

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