时间戳

首页 > 解决方案 > 两个 div 共享相同的线性渐变背景

javascript - 两个 div 共享相同的线性渐变背景

问题描述

我有两个子 div，我希望它们具有相同的线性渐变背景，顶部 div 是动态的，它向左、向右和居中移动，所以我希望与底部 div 具有相同的背景。

在此处输入图像描述

#pool-container {
width: 100%;
margin: 0 5px 0 5px;
display: flex;
flex-direction: column;


#side-step {
  background: linear-gradient( 120deg, rgba(248, 201, 129, 1) 0%, rgba(227, 76, 145, 1) 100%);
}
#main-pool {
  width: 100%;
  background: linear-gradient( 120deg, rgba(248, 201, 129, 1) 0%, rgba(227, 76, 145, 1) 100%);
}


<div id="pool-container">
    <div id="side-step"></div>
    <div id="main-pool"></div>
</div>

标签： javascripthtmlcsslinear-gradients

解决方案

这是一个如何做到的

有更好的方法吗？老实说，我不知道。

#pool-container {
  width: 800px;
  height: 600px;
  margin: 0 5px 0 5px;
  display: flex;
  flex-direction: column;
  background: #119955;
  padding: 15px;
}

#wrapper {
  background: linear-gradient( 120deg, rgba(248, 201, 129, 1) 0%, rgba(227, 76, 145, 1) 100%);
  width: 100%;
  height: 100%;
}

#excluded-area {
  width: 50%;
  height: 200px;
  background: #119955
}

#side-step {
  width: 50%;
  height: 200px;
}

#main-pool {
  width: 100%;
  height: 200px;
}
<div id="pool-container">
    <div id="wrapper">
        <div id="excluded-area"></div>
        <div id="side-step"></div>
        <div id="main-pool"></div>
    </div>
</div>

推荐阅读