重复形状作为背景图像答案

【问题标题】：Repeating shape as a background-image重复形状作为背景图像
【发布时间】：2019-10-10 03:45:38
【问题描述】：

我创建了一个 .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 出现但不重复。

【问题讨论】：

背景重复应该在背景之后
感谢您的回复。那没用
@Vilaggio 我留下了一个得到两个支持的解决方案，所以它很有可能有效。如果有帮助别忘了留下绿色复选标记！希望对您有所帮助！
在所有情况下您都需要在之后添加它。这并不是要解决您的问题，而是一般性建议，因为如果您将其放在前面，则不会被考虑，因为背景会覆盖它

标签： html css

【解决方案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

【讨论】：

谢谢，效果很好。我将宽度设置为 90%，看起来很棒！如果我有两张相同的图像，只是不同的颜色，我可以在颜色交替的情况下获得相同的结果吗？
不，我认为这不适用于此解决方案。但是，如果您要将两个图像制作成一个图像（每个图像直接相邻放置），那么是的，这个解决方案可以工作！很高兴这对您有所帮助，不要忘记将此问题标记为正确并留下绿色复选标记！
这是我尝试将 2 个图像并排放置的代码 .divider{ height: 60px;宽度：90%；边距：自动；边距底部：40px；背景图片: url(localhost:4200/assets/bgimg1.png), url(localhost:4200/assets/bgimg.png);背景重复：重复重复；背景尺寸：包含； }
这是个好主意，也是一个简单的解决方案。谢谢。
愚蠢的问题？全新的，我如何留下绿色的复选标记？