원이있는 스마트 배경 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>

Answer 2

에 대한

죄송합니다, background: url(...)를 사용에 전혀 문제가 없다 .

여기에 원하는 JSFiddle입니다.