Html 父背景仅在子元素中可见

发布于03月09日

我只想显示从子形状开始的父渐变.

我试着给白色背景的父母加::after来隐藏父母的背景 colored颜色，但是子元素的背景也变成了白色.

目前:

#parent {
  background: linear-gradient(#e66465, #9198e5);
  width: 100px;
  height: 300px;
}

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  color: white;
}

.top-10 {
  top: 10px;
}

.top-20 {
  top: 20px;
}

.top-40 {
  top: 40px;
}

.top-60 {
  top: 60px;
}

<div id="parent">
  <div class="child top-10"></div>
  <div class="child top-20"></div>
  <div class="child top-40"></div>
  <div class="child top-60"></div>
</div>

预期:

此外，子元素的位置也是可变的.

推荐答案

这是我的解决方案:

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  color: white;
  background: linear-gradient(#e66465, #9198e5);
  background-attachment: fixed;
}

.top-10 {
  top: 10px;
}

.top-20 {
  top: 20px;
}

.top-40 {
  top: 40px;
}

.top-60 {
  top: 60px;
}

<div id="parent">
  <div class="child top-10"></div>
  <div class="child top-20"></div>
  <div class="child top-40"></div>
  <div class="child top-60"></div>
</div>

另一种背景不随滚动变化的解决方案:

.child {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  border-radius: 50%;
  color: white;
  outline: 10px solid white;
}

#parent {
  background: linear-gradient(#e66465, #9198e5);
  width: fit-content;
  height: 267px;
}

.child:before {
  content: '\fe3b';
  color: white;
  display: block;
  top: -60px;
  position: absolute;
  left: -20px;
  font-size: 90px;
}

.child:after {
  content: '\fe3c';
  width: 60px;
  height: 10px;
  color: white;
  display: block;
  top: 10px;
  position: absolute;
  left: -20px;
  font-size: 90px;
}

.top-10 {
  top: 10px;
}

.top-20 {
  top: 25px;
  /* correction here*/
}

.top-40 {
  top: 40px;
}

.top-60 {
  top: 60px;
}

<div id="parent">
  <div class="child top-10"></div>
  <div class="child top-20"></div>
  <div class="child top-40"></div>
  <div class="child top-60"></div>
</div>