css - 如何使渐变在其他div中继续

Question

我希望我的渐变传递到下一个 div。在它们后面放一个带有渐变的 div 可能会起作用，但在我的网站上，这些元素并不完全相邻

.row {
  clear: both;
}

.portrait {
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
}

.photo {
  width: 200px;
  height: 150px;
  background-color: blue;
}

.gradient {
  width: 200px;
  height: 50px;
  background-color: green;
}

<div class="row">
  <div class="portrait">
    <div class="photo"></div>
    <div class="gradient"></div>
  </div>
  <div class="portrait">
    <div class="photo"></div>
    <div class="gradient"></div>
  </div>
  <div class="portrait">
    <div class="photo"></div>
    <div class="gradient"></div>
  </div>
</div>

<div class="row">
  <div class="portrait">
    <div class="photo"></div>
    <div class="gradient"></div>
  </div>
  <div class="portrait">
    <div class="photo"></div>
    <div class="gradient"></div>
  </div>
  <div class="portrait">
    <div class="photo"></div>
    <div class="gradient"></div>
  </div>
</div>

代码笔: https://codepen.io/chingwai/pen/poEGxBe

解释一下我的结构:

.portrait = 是容器，这个是根据我的数据库动态创建的。

.photo = 将是个人资料照片

.gradient = 这是渐变应该出现的地方，并继续到包含 .gradient 的其他 div 如您所见 .photo将在 div 之间，因此它们不会彼此放置。

Answer 1

给所有你想要的带有渐变BG的div:

     background-image: linear-gradient(your choice);
      background-repeat: no-repeat;
      background-attachment: fixed;

.child{
height:120px;
width:120px;
border:solid 2px white;


background-image: linear-gradient(to right,pink,green);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.parent{
display:flex;
width: 250px;    
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

编辑

在您对评论和帖子编辑进行解释之后。这样做:

.gradient{
  width: 200px;
  height: 50px;
  background-image:linear-gradient(to right, blue, lightblue);
  background-attachment:fixed;
}