Div 背景复制体

Question

我正在尝试实现此图像中显示的内容：http://i.imgur.com/6h09nly.jpg

正文将有大的彩色背景，小圆圈必须是透明的并且与正文具有相同的背景位置。即使圆圈位于另一个背景 div 内。背景不一定要透明，但应该是这样的。

不知道，即使这是可能的。到目前为止，我的解决方案是让圆圈使用相同的背景，并根据圆圈 div 在父级中的位置用负值重新定位背景。如果 body bg 设置简单，一切都很好，但我需要 body background-size: cover;

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的背景和每个圆圈的背景图片即可。

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>

虽然这是一种相当粗糙的方法，但您可以研究 clip-path 作为一种剪切形状的方法。

有关剪辑路径的更多信息，请参阅 CSS Tricks 上的这篇优秀文章。

Answer 2

为什么不使用透明背景？

.d2 {
  background: transparent;
}

您也可以将其省略 – 因为 transparent 是 background 的默认值。

Answer 3

正如 Chris 所说，但只需重复 class 并使用 ID 和背景色：透明！

JSFiddle - 演示

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>

编辑：我现在看到使用透明背景的问题。正在尝试解决。

Div 背景复制体

Div background replicate body

html

css

css-shapes