Question

在jquery中是否有办法根据另一个重叠元素顶部的位置动态设置伪元素的高度。

例如，假设我有一个标题和第二个重叠的元素（这不能改变）。您是否可以设置标题的底部：使用透明度在第2个元素顶部开始之后为无缝背景开始。任何重叠显然都会变暗。

在下面的示例中，标题的高度为80px，但它的伪元素只会向下延伸，直到遇到element2的顶部，比如40px（但这会在diff屏幕大小时发生变化）。结果是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>

目标是从标题顶部到element2开头的无缝颜色，没有重叠。如果它不是伪元素那么它很容易但是我试图操纵一个插件而我无法控制html，因此伪元素。

Answer 1

以下是使用::after

执行此操作的方法

＆＃13;

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
}

＆＃13;

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

＆＃13;

使用CSS或jquery

1 个答案: