英文:
How to create circular background behind an image?
问题
我试图重新创建这个图像。
然而，我无法弄清楚如何在图像后面创建橙色圆圈。我尝试过使用相对和绝对定位，但没有效果，而且会将其他元素推到一侧。我甚至尝试过给包裹图像的 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>
英文:
I am trying to recreate this image.
I however can't figure out how to create the orange circle behind the image. I've trid using relative and absolute position but that did nothing and pushed other elements to the side. I have even tried to color the div parent element and give it border radius but that only caused some ugly lines to be visible on the sides.
This is my code.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
.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;
}
<!-- language: lang-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></div>
<p class="Image">IMAGE</p>
</div>
</header>
</body>
</html>
<!-- end snippet -->
答案1
得分: 2
这是一个基本的想法，您可以通过在一个块级元素上设置圆角，并在父元素中隐藏溢出来实现它。
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper::after {
position: absolute;
z-index: 0;
display: block;
content: '';
top: -150px;
right: -100px;
border-radius: 50%;
width: 400px;
height: 400px;
background-color: blue;
}
.row {
display: flex;
flex-direction: row;
width: 100%;
display: flex;
height: 200px;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
z-index: 1;
}
.column.image {
background-image: url('https://placekitten.com/75/150');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
}
<div class="wrapper">
<div class='row'>
<div class='column'>
<h2>Hello World</h2>
<p>Basic idea</p>
</div>
<div class='column image'>
</div>
</div>
</div>
另一个选项是使用SVG或剪裁路径来修剪元素。
英文:
This is a basic idea on how you could accomplish it with a block element that has a border radius set on it and with the parent hiding the overflow.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper::after {
position: absolute;
z-index: 0;
display: block;
content: '';
top: -150px;
right: -100px;
border-radius: 50%;
width: 400px;
height: 400px;
background-color: blue;
}
.row {
display: flex;
flex-direction: row;
width: 100%;
display: flex;
height: 200px;
}
.column {
flex-direction: column;
flex-basis: 100%;
flex: 1;
z-index: 1;
}
.column.image {
background-image: url('https://placekitten.com/75/150');
background-repeat: no-repeat;
xbackground-attachment: fixed;
background-position: center bottom;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class='row'>
<div class='column'>
<h2>Hello World</h2>
<p>Basic idea</p>
</div>
<div class='column image'>
</div>
</div>
</div>
<!-- end snippet -->
Other option is using an SVG or a clip path to trim the element.
答案2
得分: 1
通常你可以使用 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 属性。
.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);
}
英文:
Usually you can position the elements with position: absolute and setting the top or bottom and left or right property. You can learn more about it on https://www.w3schools.com/css/css_positioning.asp
You can adjust which element is over the other with the property z-index. You can learn more about it on https://www.w3schools.com/cssref/pr_pos_z-index.php
I have added a z-index to your image and adjusted the top and right properties for both the image and the circle.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-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;
}
.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;
}
<!-- language: lang-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></div>
<p class="Image">IMAGE</p>
</div>
</header>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论