html - 带圆圈的智能背景 div 但如果是背景图像怎么办

Question

我有一个 div 和一个 span。 Span 是一个圆圈，上面添加了边框。 div 也有一个简单的背景并将其移动到顶部。但是，如果背景不是颜色及其背景图像，我们该如何做呢。

抱歉我的英语不好

HTML

<div id="main">
    <span class="circle"></span>
    <div class="div">

    </div>
</div>

CSS

#main {
    text-align: center;
}

.circle {
    background: #298EEA;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-top: 30px auto;
    border-radius: 50%;
    border: 15px solid #f3f5f6
}

.div {
    padding: 80px 80px 60px 80px;
    background: #282C39;
    border-radius: 3px;
    margin-top: -45px;
}

检查 jsfiddle

Answer 1

您可以使用伪元素并使用阴影来绘制背景色。

#main {
  text-align: center;
}
html {
  background: linear-gradient(45deg, white, gray, gold, purple, gray, white, gray, gold, purple, gray, white, gray, gold, purple, gray, white, gray, gold, purple, gray, white, gray, gold, purple, gray)
}
.circle {
  background: #298EEA;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 15px auto 0;
  border-radius: 50%;
}
.div {
  padding: 80px 80px 60px 80px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin-top: -45px;
  z-index: 1;
  color:white;
}
.div:before {
  content: '';
  height: 100px;
  width: 100px;
  position: absolute;
  z-index: -1;
  top: -50px;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: 0 0 0 1000px #282C39;
  border-radius: 50%;
}

<div id="main">
  <span class="circle"></span>
  <div class="div">
    test me
  </div>
</div>