如何在一个 div 后面创建一个圆形背景?

huangapple go评论58阅读模式
英文:

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.

如何在一个 div 后面创建一个圆形背景?

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

&lt;div class=&quot;Card&quot;&gt;
  &lt;div class=&quot;CardHeader&quot;&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;Image src=&quot;/imgs/desktop-solid.svg&quot; width={100} height={100} alt=&quot;Image&quot; /&gt;
  &lt;/div&gt;
  &lt;div class=&quot;CardBody&quot;&gt;
    &lt;h2&gt;Title&lt;/h2&gt;
    &lt;p&gt;
      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.
    &lt;/p&gt;

  &lt;/div&gt;
&lt;/div&gt;

<!-- 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 -->

&lt;div class=&quot;Card&quot;&gt;
  &lt;div class=&quot;CardHeader&quot;&gt;
    &lt;Image src=&quot;/imgs/desktop-solid.svg&quot; width={100} height={100} alt=&quot;Image&quot; /&gt;


  &lt;/div&gt;
  &lt;div class=&quot;CardBody&quot;&gt;
    &lt;h2&gt;Title&lt;/h2&gt;
    &lt;p&gt;
      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.
    &lt;/p&gt;

  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月19日 22:58:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/75501025.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定