html - 重复形状作为背景图像

Question

我创建了一个 .png 文件，我想将其用作背景图像以在屏幕上重复作为各部分之间的分隔符。

我试过使用 img，background-img，将它添加到一个新的 (div)。尝试使用 (CSS} 添加带有 repeat-x 的 img url。似乎没有任何效果。

/* with CSS 3 */
    <div class="divider">
      <img src="../../../assets/bgimg.png" height="80" alt="">
      </div>

/* with CSS 3 */
     .divider{
      background-repeat: repeat-x;
       background: url(http://localhost:4200/assets/bgimg.png);

}

这是我最近的一次尝试

没有错误消息，img 出现但不重复。

Answer 1

因此，看来您可能需要为分隔线添加宽度和高度。另外，您需要使用 css 设置图像的大小。我不确切地知道你想要它，但这里有一个 Codepen 链接，它有代码并且可能有你正在寻找的结果。

.divider{
  height: 100px;
  width: 100%;
  background-image: url(http://lh3.googleusercontent.com/dB3Dvgf3VIglusoGJAfpNUAANhTXW8K9mvIsiIPkhJUAbAKGKJcEMPTf0mkSexzLM5o=w300);
  background-repeat: repeat-x;
  background-size: contain;
}

https://codepen.io/anon/pen/PvQaWX