在调整

Question

我的背景设置为svg图片。它由一个标志和代表按钮的单词组成。我在图像中集成了单词（Agency Studio Recording Renting），因此在更改视口时它会与我的徽标一起调整大小。

现在我想点击按钮字，这样我就可以将网页访问者引导到我网站的正确部门。

我的第一个想法是在背景图像的顶部制作一个覆盖按钮字的div图层，以便它们可以点击。我使用了视口的百分比来定位和div的大小（div的位置是绝对的）我采用了这种方法，所以它随窗口调整大小。

我使用这种方法遇到的问题是它不遵循我背景上的文字。我猜是因为背景大小相对于图像的比例而且div没有。

那么如何制作一个跟随我的按钮字的div？

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Lato", sans-serif;
  background-color: black;
}

.flex {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6/ Right away we need to weave the old, new, and tweener syntaxes together. Order is important here. Since the display property itself isn't prefixed, we need to make sure we don't override newer syntaxes with older syntaxes for browsers that still (and probably always will) support both.
  .page-wrap { */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-box-pack: center;
  /*child element alignment not stretched*/
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -justify-content: center;
  -webkit-box-align: center;
  /*child element alignment stretched*/
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -align-items: center;
}

.cb-slideshow {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
}

.cb-slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  animation: imageAnimation 20s linear infinite 0s;
}

.cb-slideshow li:nth-child(1) span {
  background-image: url(fotos/homepage/CRANKITAGENCY-incl-buttons.svg);
}

.cb-slideshow li:nth-child(2) span {
  background-image: url(fotos/homepage/CRANKITSTUDIO-incl-buttons.svg);
  animation-delay: 5s;
}

.cb-slideshow li:nth-child(3) span {
  background-image: url(fotos/homepage/CRANKITRECORDS-incl-buttons.svg);
  animation-delay: 10s;
}

.cb-slideshow li:nth-child(4) span {
  background-image: url(fotos/homepage/CRANKITRENTING-incl-buttons.svg);
  animation-delay: 15s;
}

@keyframes imageAnimation {
  0% {
    opacity: 0
  }
  5% {
    opacity: 1
  }
  25% {
    opacity: 1
  }
  30% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

.home-buttons {
  top: 80%;
  left: 8%;
  position: absolute;
  height: 10%;
  width: 84%;
  border: 1px solid #fff;
}

.single-home-button {
  border-right-style: solid;
  border-right-color: white;
  border-right-width: 1xp;
  width: 25%;
  height: 100%;
}

<div class="flex home-buttons">
  <div class="single-home-button"></div>
  <div class="single-home-button"></div>
  <div class="single-home-button"></div>
  <div class="single-home-button"></div>
</div>
<ul class="cb-slideshow" style="list-style-type: none">
  <li>
    <span>CrankItAgency</span>
  </li>
  <li>
    <span>CrankItStudio</span>
  </li>
  <li>
    <span>CrankItRecords</span>
  </li>
  <li>
    <span>CrankItRenting</span>
  </li>
</ul>

BTW the white boxes, in the image ,represent the nested div I'm creating.

This is a video link visualising my problem.