在导航栏下添加重复图像

Question

我正在尝试重现类似于此的标题：

但我似乎无法在黑条下创建重复的菱形图案。钻石图案如下所示：

这是我目前用HTML和CSS编写的内容，它现在只是一个测试版本

    figure {
      background: black;
      border-radius: 3px;
      height: 50px;
      margin: 0px;
    }
    html {
      background-color: grey;
      width: 1212px;
      height: 1476px;
      margin: auto;
    }
    img {
      border-radius: 100%;
      position: relative;
      vertical-align: middle;
      left: 50px;
      bottom: 30px;
    }
    figcaption {
      display: inline-block;
      vertical-align: middle;
    }
    li {
      display: inline-block;
      text-decoration: none;
      overflow: hidden;
      margin-bottom: 50px;
    }
    a {
      list-style: none;
      text-decoration: none;
      text-align: center;
      color: white;
    }
    ul:first-child {
      float: left;
      margin-left: 100px;
    }
    ul:last-child {
      float: right;
      margin-left: 550px;
    }
    div {
      background-color: blue;
      width: 100%;
      height: 70px;
    }

<div></div>
<figure>
  <img width="100" height="100" src="http://i.imgur.com/HiCMdId.png" />
  <figcaption>
    <ul>
      <li>
        <a href="">test</a>
        <a href="">test</a>
      </li>
    </ul>
    <ul>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
    </ul>
  </figcaption>
</figure>

Answer 1

您应该将图像作为背景放置到跨越菜单整个宽度的div。您可以从HTML中删除图像src。

所以你的CSS看起来与此相似：

figure{
   background-image: url('http://i.imgur.com/HiCMdId.png');
   background-repeat: background-repeat: repeat-x;
   width: 100%;
 }

Answer 2

这就是我得到的。我正在使用名为::after的伪元素。请注意，因为在figure上没有调用类，如果您在页面上制作了任何其他figure标记，除非您覆盖样式，否则它们也会具有该背景。

figure {
  background: black;
  border-radius: 3px;
  height: 50px;
  margin: 0px;
  position: relative;
}
figure::after {
  content: ' s';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: url(http://i.stack.imgur.com/bisH4.png) repeat-x 0 0;
  z-index: -1;
  display: block;
  color: transparent;
  background-size: 10px 10px;
}
html {
  background-color: grey;
  width: 1212px;
  height: 1476px;
  margin: auto;
}
img {
  border-radius: 100%;
  position: relative;
  vertical-align: middle;
  left: 50px;
  bottom: 30px;
}
figcaption {
  display: inline-block;
  vertical-align: middle;
}
li {
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  margin-bottom: 50px;
}
a {
  list-style: none;
  text-decoration: none;
  text-align: center;
  color: white;
}
ul:first-child {
  float: left;
  margin-left: 100px;
}
ul:last-child {
  float: right;
  margin-left: 550px;
}
div {
  background-color: blue;
  width: 100%;
  height: 70px;
}

<div></div>
<figure>
  <img width="100" height="100" src="http://i.imgur.com/HiCMdId.png" />
  <figcaption>
    <ul>
      <li>
        <a href="">test</a>
        <a href="">test</a>
      </li>
    </ul>
    <ul>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
    </ul>

  </figcaption>
</figure>