WordPress Kadence主题：为博客归档标题背景添加图片叠加层

问题核心 #

你已为Kadence主题的文章归档页（blog页面）标题容器添加渐变背景，但通过主题自定义设置添加背景图后会覆盖渐变，background-blend-mode未生效，且主题不允许在标题背景区域添加HTML短代码，需通过CSS实现渐变与背景图的混合效果。

修复方案 #

方案1：CSS同时定义渐变与背景图并设置混合模式

将渐变和背景图同时写入background-image属性，用逗号分隔多层背景，再通过混合模式实现叠加。同时修正你之前PHP代码的语法错误（<? php改为<?php）：

<?php $page_for_posts = get_option( 'page_for_posts' ); ?>
.page-id-<?php echo $page_for_posts; ?> .entry-hero-container-inner {
    /* 渐变在前，背景图在后，顺序影响混合效果 */
    background-image: linear-gradient(to right, red, black), url('你的背景图URL');
    background-size: cover;
    background-position: center center;
    /* 可选混合模式：multiply/overlay/screen/color等，按需调整 */
    background-blend-mode: multiply;
}

方案2：用CSS伪元素创建渐变叠加层

如果方案1的混合模式仍不生效，可通过伪元素单独生成渐变层，叠加在背景图上方：

<?php $page_for_posts = get_option( 'page_for_posts' ); ?>
.page-id-<?php echo $page_for_posts; ?> .entry-hero-container-inner {
    position: relative;
    background-image: url('你的背景图URL');
    background-size: cover;
    background-position: center center;
}
/* 伪元素作为渐变叠加层 */
.page-id-<?php echo $page_for_posts; ?> .entry-hero-container-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, red, black);
    /* 调整透明度控制渐变深浅 */
    opacity: 0.6;
    /* 避免干扰容器内的交互元素 */
    pointer-events: none;
}

代码添加方式 #

• 直接在WordPress后台「外观」→「自定义」→「附加CSS」中粘贴代码（无需PHP部分的话，可直接写CSS，把.page-id-xxx换成你blog页面的实际ID）；
• 若需动态获取归档页ID，可使用Code Snippets插件添加包含PHP的代码片段，或写入子主题的functions.php（需用add_action('wp_head', 'your_custom_function')包裹代码）。

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