css 空心圆项目

yftpprvb 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(132)

我想实现在覆盖背景图像层的圆形切口/空洞。
我有白色色调（不透明度60%）覆盖的背景图像。在背景上，我有3个圆圈，包括文字。
我怎样才能剪出白色的“环”呢？
我想在白色色调中制作空心/切口，如下所示：

我的代码现在看起来如下：

body {
  margin: 0;
}

.block {
  position: relative;
  width: 100%;
}

.bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -3;
}
.bg:before {
  content: "";
  background: #ffffff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.bg img {
  display: block;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.wrapper {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 30px;
}

.item {
  background: #aaaaaa;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  display: flex;
  flex-direction: columns;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.item h2 {
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #000000;
  text-align: center;
  margin: 0;
}

<section class="block">
  <div class="bg">
    <img src="https://i.picsum.photos/id/98/1920/1080.jpg?hmac=38vHAR4QCfR9YGpaasbQ0h390ZJnDlnQqzv3xTDF6ik" alt="" />
  </div>
    <div class="wrapper">
      <div class="item">
        <div class="item__content">
          <h2>Heading 1</h2>
        </div>
      </div>

      <div class="item">
        <div class="item__content">
          <h2>Heading 2</h2>
        </div>
      </div>

      <div class="item">
          <h2>Heading 3</h2>
      </div>
  </div>
</section>

css

来源：https://stackoverflow.com/questions/74782481/hollow-circle-items

1条答案

按热度按时间

ej83mcc01#

你可以像下面这样做。我也简化了代码：

body {
  margin: 0;
}

section {
  min-height: 100vh;
   /* a grid container with 3 columns*/
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* the image as background */
  background: url(https://i.picsum.photos/id/98/1920/1080.jpg?hmac=38vHAR4QCfR9YGpaasbQ0h390ZJnDlnQqzv3xTDF6ik) center/cover;
}

.item {
  overflow: hidden; /* hide the overflow of the shadow */
  /* center the heading */
  display: grid;
  place-items: center;
  /**/
}
.item h2 {
  width: 80%; /* adjust this to control the size */
  aspect-ratio: 1; /* keep it a perfect circle */
  box-sizing: border-box;
  border-radius: 50%;
  /* center the content of the heading */
  display: grid;
  place-items: center;
  /**/
  padding: 20px; /* this will control the inner space */
  background: rgb(255 255 255/60%) content-box; /* color only the content area */
  box-shadow: 0 0 0 100vmax rgb(255 255 255/60%); /* a big box-shadow */
}

<section>
  <div class="item">
    <h2>Heading 1</h2>
  </div>
  <div class="item">
    <h2>Heading 2</h2>
  </div>
  <div class="item">
    <h2>Heading 2</h2>
  </div>
</section>

赞(0）回复(0）举报 2022-12-15

我来回答

css 空心圆项目

1条答案

相关问题

热门标签

最新问答