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

Question

我正在寻找一种方法让 png 背景图像（具有透明度）开始第一个 div（带有彩色背景）并继续下一个 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，为什么不呢。如果我在 #1 和 #2 上使用简单的背景图像，问题是图像会在 #1 的末尾自行剪切并在 #2 处再次开始。而且我不能使用另一个绝对 div 因为我需要能够 select 文本或单击 DIV 中的按钮

这是一张图片来说明这个想法。

div#1填充黄色，#2填充红色
background-image是透明背景的绿色三角形，只是三角形。
您可以看到 #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

And I can't use another absolute div because I need to be able to select the text or click the buttons in the DIVs

存在解决此问题的方法 pointer-events: none;，可用于通过简单 css 禁用元素上的点击事件，这允许 select 或点击禁用元素下的内容。

这是我使用此解决方案的代码：

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>

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

css background-image to continue from a div to another

html

css

background-image