Div фон реплицировать тело

Question

Я пытаюсь добиться того, что отображается на этом изображении: http://i.imgur.com/6h09nly.jpg

Тело будет иметь большой цветной фон и маленький круг должен быть прозрачным и иметь такое же положение, как фон тела. Даже если круг находится внутри другого div с другим фоном. Фон не должен быть прозрачным, но должен выглядеть.

Не знаю, даже если это возможно. Мое решение до сих пор заключается в том, чтобы круг использовал тот же фон и перемещал фон со значениями минус в зависимости от положения div div в родительском элементе. Все работало нормально, если тело bg было бы простым, но мне нужен размер фона тела: обложка;

HTML-:

body { 
 
    height: 100%; 
 
    background: url(../img/bg.jpg) no-repeat; 
 
} 
 
.d1 { 
 
    background: #000; 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 500px; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.d2 { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    border: 2px solid #fff; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-size: 20px; 
 
    overflow: hidden; 
 
    background: url(../img/bg.jpg) no-repeat; 
 
    background-position: -500px -200px; 
 
}

<div class="d1"> 
 
    <div class="d2">Some info in the circle</div> 
 
</div>

Answer 1

Вы могли бы попробовать что-то вроде этого. Просто установите фон тела и фоновое изображение каждого круга.

body { 
 
background: url(http://maryschuler.com/wp-content/gallery/april08/univexpansion.jpg) no-repeat center center; 
 
background-size: 100% 100%; 
 
margin: 12.5%; 
 
} 
 
.circle { 
 
border-radius: 50%; 
 
border: solid 2px #fff; 
 
width: 100%; 
 
padding-top: 100%; 
 
height: 0; 
 
position: relative; 
 
} 
 
.circle .region { 
 
border-radius: 50%; 
 
border: solid 2px #fff; 
 
width: 25%; 
 
padding-top: 25%; 
 
height: 0; 
 
background: url(http://maryschuler.com/wp-content/gallery/april08/univexpansion.jpg) no-repeat center top; 
 
background-size: 100vw; 
 
position: absolute; 
 
clip-path: rect(10px, 20px, 30px, 40px); 
 
} 
 
.circle .north { 
 
top: -12.5%; 
 
left: 50%; 
 
margin-left: -12.5%; 
 
} 
 
.circle .east { 
 
top: 50%; 
 
right: -12.5%; 
 
margin-top: -12.5%; 
 
background-position: right center; 
 
} 
 
.circle .south { 
 
bottom: -12.5%; 
 
left: 50%; 
 
margin-left: -12.5%; 
 
background-position: center bottom; 
 
} 
 
.circle .west { 
 
top: 50%; 
 
left: -12.5%; 
 
margin-top: -12.5%; 
 
background-position: left center; 
 
}

<div class="circle"> 
 
    
 
    <div class="region north"></div> 
 
    <div class="region east"></div> 
 
    <div class="region south"></div> 
 
    <div class="region west"></div>  
 
    
 
</div>

Хотя это довольно грубый метод, вы можете исследовать клип-путь как способ отсечения формы.

Для получения дополнительной информации о клипе см. Эту замечательную статью на странице CSS Tricks.

Answer 2

Почему бы не использовать прозрачный фон?

.d2 { 
    background: transparent; 
} 

Вы можете точно так же оставить его, - как transparent значение по умолчанию для background.

Answer 3

Как сказал Крис, но просто повторите класс и используйте ID и фоновый цвет: прозрачный!

JSFiddle - DEMO

CSS

body { 
    background: linear-gradient(to right, red , blue); 
    margin: 12.5%; 
} 
.circle { 
    border-radius: 50%; 
    border: solid 2px #fff; 
    width: 25%; 
    padding-top: 25%; 
    height: 0; 
    background-color: transparent; 
    position: absolute; 
} 
#big { 
    width: 100%; 
    padding-top: 100%; 
    position: relative; 
} 
#north { 
    top: -12.5%; left: 50%; 
    margin-left: -12.5%; 
} 
#east { 
    top: 50%; right: -12.5%; 
    margin-top: -12.5%; 
} 
#south { 
    bottom: -12.5%; left: 50%; 
    margin-left: -12.5%; 
} 
#west { 
    top: 50%; left: -12.5%; 
    margin-top: -12.5%; 
} 

HTML

<div class="circle" id="big">   
    <div class="circle" id="north"></div> 
    <div class="circle" id="east"></div> 
    <div class="circle" id="south"></div> 
    <div class="circle" id="west"></div>    
</div> 

EDIT: Я вижу проблему использования прозрачного фона в настоящее время. Попытка решить эту проблему.