英文:
How to create circular background behind a div?
问题
我正在尝试使用CSS重新创建这张卡片。
然而,我无法弄清如何创建HTML和CSS。当我创建一个div
并给它一个背景颜色和相对位置时,图片被推出。
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 250px;
height: 350px;
background-color: white;
}
.CardHeader {
width: 100%;
display: flex;
flex-direction: column;
}
.CardHeader div {
width: 150px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
left: -15px;
}
.CardHeader img {
width: 100px;
height: 100px;
background-color: red;
}
<div class="Card">
<div class="CardHeader">
<div></div>
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
注意:在上述HTML中,我看到您尝试使用Image
元素,但应使用<img>
标签。这是修复后的代码。
英文:
I am trying to recreate this card using CSS.
However I can't figure out how to create the HTML and CSS. When I create a div and give it a background cololour and relative position, the Image is getting pushed out.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 250px;
height: 350px;
background-color: white;
}
.CardHeader {
width: 100%;
display: flex;
flex-direction: column;
}
.CardHeader div {
width: 150px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
left: -15px;
}
.CardHeader img {
width: 100px;
height: 100px;
background-color: red;
}
<!-- language: lang-html -->
<div class="Card">
<div class="CardHeader">
<div></div>
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
请注意以下几点:
将图像放在div元素内部
在图像上使用 position:absolute
以允许您移动图像层
在div上使用 overflow:hidden;
以“切断”图像,使其不显示在容器外部。
您不需要额外的div元素在卡片标题内部 - 只需使用卡片标题作为父元素。
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
height: 350px;
background-color: lightgray;
border-radius: 10px;
}
.CardHeader {
display: flex;
flex-direction: column;
width: 300px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.CardHeader img {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: -20%;
left: -10%;
border-radius: 50%;
}
<div class="Card">
<div class="CardHeader">
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
这些是您提供的CSS和HTML代码的翻译部分。
英文:
Few things to learn:
Place the image inside the div element
Use position:absolute
on the image to allow you to move the image layer
Use overflow:hidden;
on the div to 'cut off' the the image so it doesn't appear outside the container.
You also don't need the extra div element inside the card header - just use the card header as the parent.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
height: 350px;
background-color: lightgray;
border-radius:10px;
}
.CardHeader {
display: flex;
flex-direction: column;
width: 300px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.CardHeader img {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: -20%;
left: -10%;
border-radius: 50%;
}
<!-- language: lang-html -->
<div class="Card">
<div class="CardHeader">
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论