Flex容器背景图片无法显示问题求助

近期尝试在网站的flex容器（.post-shorts）中设置背景图片，但始终无法显示，不过背景颜色可正常显示，说明格式基本无误。已尝试调整background的position、alignment、overflow及repeat属性，均未解决问题。

相关代码如下：

CSS代码 #

.posts{
    margin: auto;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 20px;
    background-image: url(logo.png);
    background-size: 20%;
    font-family: Arial, Helvetica, sans-serif;
    width: 900px;
}

.row {
    margin-top: 20px;
    margin-left: 40px;
    margin-right: 40px;
    text-align: center;
}

.post-shorts{
    flex-basis: 31%;
    border-radius: 13px;
    margin-right: 10px;
    margin-left: 10px;
    position: relative;
    width: 240px;
    height: 300px;
    background-image: url(PlaceHolderImage.png);
    transition-duration: .5s;
}

.post-shorts:hover {
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.234);
    flex-basis: 40%;
    background-image: url(PlaceHolderImage2.png);
}

.post-col {
    padding-top: 5px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    
}

HTML代码 #

<section class="posts">
  <h1>POSTS</h1>
  <p>Paragraph</p>
  <div class="row">
    <div class="post-shorts">
      <div class="post-col">
        <h3>Shorts</h3>
        <p>Animated using Blender</p>
      </div>
    </div>
  </div>
</section>

需要解决该容器显示背景图片而非颜色的问题！

结合代码分析，问题主要集中在以下几点，对应解决方法如下：

• 修正图片路径：确认PlaceHolderImage.png、PlaceHolderImage2.png的文件路径是否与CSS文件匹配。若图片存放在子目录（如images/），需将路径改为url(images/PlaceHolderImage.png)。
• 移除子元素的遮挡：.post-col采用绝对定位完全覆盖.post-shorts，默认背景为不透明（继承自父元素或浏览器默认），会遮挡下方的背景图。给.post-col添加background-color: transparent;，让背景图透出来。
• 添加背景尺寸适配：.post-shorts仅设置了background-image，未定义background-size，可能因图片尺寸过大超出容器范围导致无法显示。添加background-size: cover;或contain;，确保图片适配容器尺寸。
• 启用Flex布局：.post-shorts设置了flex-basis，但父容器.row未声明display: flex;，Flex属性无法生效，可能影响容器渲染。给.row添加display: flex; justify-content: center; align-items: center;，启用Flex布局。

修改后的CSS代码示例 #

.posts{
    margin: auto;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 20px;
    background-image: url(logo.png);
    background-size: 20%;
    font-family: Arial, Helvetica, sans-serif;
    width: 900px;
}

.row {
    margin-top: 20px;
    margin-left: 40px;
    margin-right: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.post-shorts{
    flex-basis: 31%;
    border-radius: 13px;
    margin-right: 10px;
    margin-left: 10px;
    position: relative;
    width: 240px;
    height: 300px;
    background-image: url(PlaceHolderImage.png);
    background-size: cover;
    transition-duration: .5s;
}

.post-shorts:hover {
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.234);
    flex-basis: 40%;
    background-image: url(PlaceHolderImage2.png);
    background-size: cover;
}

.post-col {
    padding-top: 5px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: transparent;
    color: #ffffff; /* 可选：若图片较亮，设置文字颜色提升可读性 */
}

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