绝对元素上不重复的背景图像

Question

背景图像(地形)不重复。它停留在"Terra管理技术“之上(看图)。我想要涵盖整个元素(手风琴)，这是在页脚上方的元素。

​

​

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;
}

Answer 2

您不能为标记执行background-repeat。

使用CSS来加载图像，而不是使用<img>，或者在单行中使用background合并所有背景属性

.topography {
   background: url('/img/bg/topo.svg') repeat;
}

Answer 3

您可以删除html中的图像，并在CSS文件中设置background-image属性。

如下所示：

​

.topography {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1EwO-OcUp2ZTpjubUsiZPLm8RAej4XQLnKs5s3Ry5kAd8IEVT");
  /*relative link (from your css file location) to your background image*/
  background-repeat: repeat;
}

<div class="topography">
  <p>What ever here is</p>
  <p>What ever here is 2</p>
  <p>What ever here is 3</p>
</div>

​