html - 背景图像不在绝对元素上重复

Question

背景图像(地形)不重复。它停在 “土地管理技术”(看图片)。我想覆盖整个元素( Accordion )，也就是页脚正上方的元素。

HTML

<div class="accordion">
  <span class"topography"><img src="/img/bg/topo.svg"/></span>
  .....
</div>

CSS

.accordion {
  position: relative;
}

.topography {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
pointer-events: none;
background-repeat: repeat;
}

.topography img{
height: 100%;
background-repeat: repeat;
}

Answer 1

那么您应该将图像用作背景图像，而不是 img 标签:

<div class="accordion">
  <span class"topography"></span>
  .....
</div>

CSS

.accordion {
  position: relative;
}

.topography {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
pointer-events: none;
background-image: url("/img/bg/topo.svg");
background-repeat: repeat;
}