如何使渐变在其他div中继续
罗纳尔多
我希望将渐变传递到下一个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>Codepen：https：//codepen.io/chingwai/pen/poEGxBe
解释我的结构：
.portrait =是容器，它是根据我的数据库动态创建的。
.photo =将是个人资料照片
.gradient=这是渐变应该到达的地方，并继续到包含div的其他div。.gradient如您所见，.photo它将位于div之间，因此它们不会位于彼此之间。
埃尔德舍
使用渐变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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在其他循环中继续enumarete（）循环
- 2
大熊猫将总和拆分为上限，然后在其他列中继续进行剩余操作
- 3
在python中继续进行其他操作
- 4
如果/其他在foreach中继续发送邮件
- 5
单击特定的div时仅执行一次事件侦听器，但继续在其他div上执行
- 6
DIV不在其他DIV中
- 7
在其他 div 之上分层 div
- 8
Angular 2 setinterval（）继续在其他组件上运行
- 9
如何将div覆盖在其他div的内容上而不位于该div中
- 10
如何使用鼠标滚动在其他div后面显示div
- 11
如何获取DIV中的数据以显示在其他DIV的下方
- 12
如何在其他div中选择特定的多个div并更改其颜色
- 13
如何使用引导程序类将div居中放置在其他div中？
- 14
仅在其他div中存在时如何显示div
- 15
如何在其链的上下文中继续执行堆栈式协程？
- 16
在V8或其他C ++ JavaScript解释器中继续
- 17
在V8或其他C ++ JavaScript解释器中继续
- 18
为什么<div>悬停在其他所有内容上，以及如何解决？
- 19
如何使用php文件在其他HTML页面中显示HTML菜单div？
- 20
我如何获取图像值并在其他div上实施React？
- 21
如何在其他所有元素/ div上显示我的element（`class =“ line”`）？
- 22
如何在打印介质时显示div，并在其他时间隐藏？
- 23
如何在其他div上应用相同的效果（淡入/淡出）？
- 24
如何将这个div放在其他人的旁边？
- 25
如何使用php文件在其他HTML页面中显示HTML菜单div？
- 26
如何停止div折叠在其他html内容上
- 27
div浮动在其他响应div上
- 28
悬停时div在其他div上的滑动
- 29
将div放在其他div的左边框上
我来说两句