Question

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

我尝试使用img，background-img并将其添加到新的（div）中。尝试使用（CSS}用repeat-x添加img网址。似乎没有任何作用。

/* 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

重复将形状作为背景图像

1 个答案: