円を使ったスマートなバックグラウンドdivですが、ifが背景画像の場合は

Question

divと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があります。