CSS背景图像从一个div继续到另一个

Question

我正在寻找一种具有png背景图像（具有透明性）的方法来开始第一个div（背景为彩色）并在下一个div中继续，但是从前一个分区

假设我们具有这种结构：

<section>
   <div id="1">some text</div> <!-- background-image starts at the top and ends at the end -->
   <div id="2">some text</div> <!-- same background-image starts where it ended in #1 -->
</section>

但div＃1和＃2具有彩色背景。我们可以使用彩色背景和背景图像，但是我需要确保背景图像从div＃2开始，在该背景下它停止了div＃1，并且当然必须响应。

我不能在 section 上使用背景图像，因为DIV具有彩色背景，并且会隐藏 section 中的背景图像。

目标是仅使用CSS，但是如果唯一的方法是使用javascript / jquery，为什么不使用CSS。问题是，如果我在＃1和＃2上使用简单的背景图像，则该图像将在＃1的末尾剪切并在＃2处重新开始。而且我不能使用另一个绝对div，因为我需要能够选择文本或单击DIV中的按钮

这是一张说明想法的图像。

• div＃1用黄色填充，＃2是红色。
• 背景图像是透明背景的绿色三角形，只是三角形。
• 您会看到＃1底部的最后一个三角形将在＃2中继续。

Answer 1

您可以使用绝对定位的伪元素托管背景图像，尽管它需要另一级嵌套元素。

section {
  position: relative;
}

section::before {
  content: "";
  background: url(https://placehold.it/100x100) repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: .5;
}

section > div > div {
  position: relative; /* Pull the content above the ::before */
}

section > div:nth-child(1) {
  background: red;
  height: 200px;
}

section > div:nth-child(2) {
  background: yellow;
  height: 300px;
}

<section>
   <div id="1">
     <div>
       some text
     </div>
   </div>
   <div id="2">
     <div>
       some text
     </div>
   </div>
</section>

Answer 2

我不能使用另一个绝对div，因为我需要能够选择文本或单击DIV中的按钮

要解决此问题，pointer-events: none;可以用于仅使用css禁用元素上的点击事件，从而可以选择或单击禁用元素下的内容。

这是此解决方案的代码：

section {
  width: 300px;
  height: 500px;
  background: gray;
  padding: 10px;
  position: relative;
}

.half {
  height: 50%;
}

.yellow {
  background: yellow;
}

.red {
  background: red;
}

.overlay {
  top: 0;
  position: absolute;
  height: 100%;
  width: 50px;
  background-image: url('https://www.transparentpng.com/thumb/triangle/793jA5-green-triangle-transparent-background.png');
  background-repeat: repeat;
  background-size: 50px;
  pointer-events: none;
}

<section>
  <div class="half yellow">
    you can select me
    <br>
    <button>
       you can click me
    </button>
  </div>
  <div class="half red">
     you can select me
    <br>
    <button>
       you can click me
    </button>
  </div>
  <div class="overlay"></div>
</section>