如何在图片后方创建圆形背景？定位与圆角方案尝试失败

你之前的问题主要出在两点：一是绝对定位元素没有相对定位的父容器做参照，导致位置乱跑；二是直接给父容器加圆形背景时，容器本身是矩形，容易出现多余线条。下面是修改后的代码，完美实现目标效果：

修改后的HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css"/>
    <title>Joe Doe</title>
</head>
<body>
    <header class="PageHeader">
        <div>
            <p>Hello, My name is</p>
            <h1>Joe Doe</h1>
            <h2>Full-Stack Developer</h2>
            <p>I design and develop services for customers of all sizes, specializing in creating stylish, modern websites, web services and online stores</p>
            
            <nav class='NavBar'>
                <ul>
                    <li><a href='#Biography'>Biography</a></li>
                    <li><a href='#MySkills'>What I Do?</a></li>
                    <li><a href='#Awards'>Awards</a></li>
                    <li><a href='#Experience'>Experience</a></li>
                    <li><a href='#Portfolio'>My Portfolio</a></li>
                    <li><a href='#Contact'>Contact</a></li>
                </ul>
            </nav>
        </div>

        <div class="ImageContainer">
            <div class="OrangeCircle"></div>
            <p class="Image">IMAGE</p>
        </div>
    </header>
</body>
</html>

修改后的CSS #

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700;800;900&display=swap');

:root{
    --background: #f7f7ff;
    --headerBackgroundColour: #ff9101;
    --titles: #0b0b15;
    --text: #555555;
    --borders: #bbbbbb;
    --dividers: #eeeeee;

    --spacing: 1em;
    --sectionSpacing: 4vw;
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Roboto';
    text-decoration: none;
    color: var(--text);
    font-weight: 400;
}

.PageHeader{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; /* 让左右两部分垂直居中 */
}

.PageHeader div:nth-child(1){
    width: 50%;
    padding-left: var(--sectionSpacing);
    padding-top: var(--sectionSpacing);
    padding-bottom: var(--sectionSpacing);
}

.PageHeader div:nth-child(1) p:nth-child(1){
    color: var(--titles);
}

.PageHeader div:nth-child(1) h1{
    padding: 0;
    font-weight: 900;
    color: var(--titles);
    font-size: 6em;
}

.PageHeader div:nth-child(1) h2{
    color: var(--headerBackgroundColour);
    font-weight: 700;
    font-size: 2em;
}

.NavBar ul{
    margin-top: var(--spacing);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.NavBar li{
    list-style: none;
}

.NavBar li a{
    padding: var(--spacing);
    border-radius: 5px;
}

.PageHeader .ImageContainer{
    width: 50%;
    position: relative; /* 关键：给父容器设置相对定位，作为绝对定位元素的参照 */
    display: flex;
    justify-content: center; /* 让图片水平居中 */
    align-items: center; /* 让图片垂直居中 */
    min-height: 600px; /* 保证容器有足够高度容纳圆形和图片 */
    overflow: hidden; /* 隐藏圆形超出容器的部分，避免侧边多余线条 */
}

.PageHeader .ImageContainer .OrangeCircle{
    width: 800px;
    height: 800px;
    background-color: var(--headerBackgroundColour);
    position: absolute;
    right: -200px; /* 把圆形向右偏移，只显示左侧部分 */
    border-radius: 50%;
    z-index: 1; /* 让圆形在图片下方 */
}

.PageHeader .ImageContainer .Image{
    width: 250px;
    height: 250px;
    background-color: red;
    position: relative;
    z-index: 2; /* 保证图片在圆形上方 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.BioContainer{
    background-color: whitesmoke;
}

关键修改说明 #

• 给.ImageContainer添加position: relative，让内部的绝对定位元素以它为参照，不会脱离布局乱跑
• 橙色圆形设置right: -200px，配合容器的overflow: hidden，只显示左侧需要的部分，避免侧边出现多余线条
• 用flex布局让图片在容器内居中，保证始终处于圆形上方的正确位置
• 通过z-index控制层级，确保图片显示在橙色圆形之上

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