制作博客网站时Hero区域图片显示效果与教程不符求助

我跟着教程制作博客网站，代码和教程完全一致，但Hero区域的图片显示效果和视频里不一样。当前效果如下：

问题排查与修复方案 #

1. HTML结构错误

你的代码里.pattern-bg包裹了.img-box，但教程里这两个元素应该是同级关系（都在.right下），这样绝对定位的.pattern-bg才能正确作为背景层，不影响图片和形状的定位。

修复后的HTML：

<!-- HERO SECTION -->
<div class="hero">
    <div class="container">
        <div class="left">
            <h1 class="h1">
                Hello World! I'm <b> Buse&nbsp;Nur </b>,
                <br> Web Developer
            </h1>
            <p class="h3">
                Specalized in <abbr title="Accessibility">ally</abbr>
                and Core Web Vitals
            </p>
            <div class="btn-group">
                <a href="#" class="btn btn-primary"> Contact Me </a>
                <a href="#" class="btn btn-secondary"> About Me </a>
            </div>
        </div>
        <div class="right">
            <div class="pattern-bg"></div>
            <div class="img-box">
                <img src="./images/profile.jpg" width="500px" height="500px" alt="Buse Nur Çetin" class="hero-img">
                <div class="shape shape-1"></div>
                <div class="shape shape-2"></div>
            </div>
        </div>
    </div>
</div>

2. CSS缺少媒体查询导致样式冲突

你的CSS里有两段重复的HERO SECTION样式，第一段是移动端样式，第二段是桌面端样式，但没有用媒体查询包裹，导致样式优先级混乱，桌面端样式可能没有在合适的屏幕尺寸下生效。

修复后的CSS（添加媒体查询）：

/* HERO SECTION - 移动端基础样式 */
.hero{
    background: var(--background-primary);
    padding-top: 2rem;
    padding-bottom: var(--py);
    text-align: center;
}

.hero .h1{
    margin-bottom: 1rem;
    line-height: 1.6;
}

.hero b{
    color: var(--accent);
    font-weight: inherit;
}

.hero .h3{
    color: var(--foreground-secondary);
    margin-bottom: 2rem;
}

.hero .btn-group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    text-align: center;
}

.hero .right{
    display: none;
}

/* 桌面端适配（根据教程选择合适的断点，这里用992px示例） */
@media (min-width: 992px) {
    .hero{
        text-align: left;
    }

    .hero .container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 50px;
    }

    .hero .btn-group{
        justify-content: start;
        gap: 30px;
    }

    .hero .right{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero .pattern-bg{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 200px;
        background: url(../images/pattern.png);
        background-size: contain;
        opacity: 0.2;
    }

    .hero .img-box{
        position: relative;
        z-index: 2;
    }

    .hero-img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0 0 280px 230px;
        transform: translate(10px , -10px);
    }

    .hero .shape {
        position: absolute;
        top:  50%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-50%, -42%) rotate(-20deg);
      }
    
      .hero .shape-1 {
        background: var(--accent);
        width:  90%;
        height: 90%;
        z-index: -1;
      }
    
      .hero .shape-2 {
        width:  92%;
        height: 92%;
        box-shadow: inset 0 -30px 0 var(--action-primary);
        z-index: 2;
      }
}

3. 额外检查点

• 确认profile.jpg和pattern.png的路径正确，图片文件存在于对应目录中
• 如果图片尺寸和教程差异较大，可以微调.hero-img的border-radius或.shape的transform参数来匹配效果

内容的提问来源于stack exchange，提问作者Buse Nur Çetin