Question

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

身体将具有大的彩色背景，小圆圈必须是透明的，并且具有与身体相同的背景位置。即使圆圈在另一个背景中的另一个div内。背景不必是透明的，但应该看起来像。

Dunno，即使这是可能的。到目前为止，我的解决方案是让圆圈使用相同的背景，并根据父级中的圆形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

你可以尝试这样的事情。只需设置身体的背景和每个圆圈的背景图像。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

虽然这是一种相当粗略的方法，但您可以将剪辑路径作为剪裁形状的方法进行研究。

有关clip-path的更多信息，请参阅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>

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

Div背景复制体

3 个答案: