如何在图像后面创建圆形背景？

问题描述 投票：0回答：1

我正在尝试重新创建此图像。

但是我不知道如何在图像后面创建橙色圆圈。我试过使用相对和绝对位置，但那什么也没做，并将其他元素推到了一边。我什至尝试给 div 父元素上色并给它边框半径，但这只会导致侧面出现一些丑陋的线条。

这是我的代码。

@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;

}

.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%;

    display: flex;
    flex-direction: column;

    padding-right: var(--sectionSpacing);
}

    .PageHeader .ImageContainer div{
        width: 1000px;
        height: 1000px;

        background-color: var(--headerBackgroundColour);
        position: absolute;
        display: block;

        border-radius: 50%;
    }


    .PageHeader .ImageContainer .Image{
        display: inline-block;
        width: 250px;
        height: 250px;
        background-color: red;

        margin-left: var(--sectionSpacing);
    }

.BioContainer{
    background-color: whitesmoke;
}
<!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></div>
                <p class="Image">IMAGE</p>
            </div>
    
        </header>

</body>
</html>

html css sass flexbox css-selectors
1个回答
0
投票

通常，您可以使用 

position: absolute
定位元素并设置 
top
或 
bottom
和 
left
或 
right
属性。您可以在https://www.w3schools.com/css/css_positioning.asp

上了解更多信息

您可以使用属性

z-index
调整哪个元素在另一个之上。您可以在 https://www.w3schools.com/cssref/pr_pos_z-index.php

上了解更多信息

我已经为您的图像添加了

z-index
，并调整了图像和圆圈的
top
和
right
属性。

@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;

}

.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%;

    display: flex;
    flex-direction: column;

    padding-right: var(--sectionSpacing);
}

    .PageHeader .ImageContainer div{
        width: 1000px;
        height: 1000px;

        background-color: var(--headerBackgroundColour);
        position: absolute;
        display: block;

        border-radius: 50%;
        top: -40%;
    }


    .PageHeader .ImageContainer .Image{
        display: inline-block;
        width: 250px;
        height: 250px;
        background-color: red;
        z-index: 999;
        position: absolute;
        top: 25%;
        right: 15%;

        margin-left: var(--sectionSpacing);
    }

.BioContainer{
    background-color: whitesmoke;
}
<!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></div>
                <p class="Image">IMAGE</p>
            </div>
    
        </header>

</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.