jquery - 使用 CSS 或 jquery 将元素高度设置为在指定元素的开头结束

Question

jquery 中有没有一种方法可以根据另一个重叠元素的顶部位置动态设置伪元素的高度。

例如，假设我有一个标题和第二个重叠的元素(无法更改)。您能否将标题的底部设置为:在第二个元素顶部开始的位置之后结束，以获得使用透明度的无缝背景。任何重叠都会明显变暗。

在下面的示例中，header 的高度为 80px，但它的伪元素只会向下拉伸(stretch)直到它遇到 element2 的顶部，比如 40px(但这会随着屏幕尺寸的不同而变化)。结果将是 header 和 element2 的整个背景颜色相同。

CSS 示例

 .site-header {
    background-color:  transparent; 
    width: 100%;
    height:80px;    
}

.site-header:after {
    background:rgba(251,75,4,0.6);
    width: 100%;    
    z-index-1;
}

.element2{
    height:500px;
    background:rgba(251,75,4,0.6);
    width:100%
}

HTML

<header>
OVERLAPPING
<element2>

目标是从 header 顶部到 element2 开始的无缝颜色，没有重叠。如果不是伪元素，那会很容易，但我正在尝试操作插件，但我无法控制 html，因此无法控制伪元素。

Answer 1

下面是如何使用 ::after

body {
  margin: 0
}

header {
  background-color: transparent;
  width: 100%;
  min-height: 40px;
  position: relative
}

header::after {
  content: "";
  height: 500px;
  background: rgba(251, 75, 4, 0.6);
  width: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: -1;
}

div {
  height: 500px;
  width: 100%;
  border: green solid 5px;
  box-sizing: border-box
}

<header>
  lipsum
</header>
<div>
  test
</div>