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

html5 • • 问答 • 140 阅读

我希望我的渐变传递到下一个 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>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
</div>

<div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
</div>

回答

给所有你想要的 div 用渐变 BG：

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

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

编辑

在您对评论和帖子编辑做出解释之后。做这个：

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

以上是如何使渐变在其他div中继续的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容