我有兩個div元素和一個背景色。我想要實現的是讓背景顏色在第二個元素開始點之后一點點結束。像這樣:

<div>
   <div style="background-color:red;">
      <div class="container">
         Element 1
      </div>
   </div>
   <div style="background-color:white;">
      <div class="container">
         Element 2
      </div>
   </div>
</div>

如果我沒理解錯的話，這里我想改變的是背景色的‘偏移’。但是這有可能嗎？我該怎么做呢？

# # #您可以使用線性漸變來繪制您想要的顏色和高度的背景。

紅色背景設置在元素的父元素上，而不是每個元素上，這樣我們就可以隨心所欲地調整它。

請看這個例子:

#main {
  border: thin solid Black;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(to bottom, Red 35%, transparent 35%);
  
  padding-top: 2.5rem;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  border: thin solid Black;
  background: White;
}

<div id="main">
    <div class="container">Element 1</div>
    <div class="container">Element 2</div>
</div>