CSS背景gif图像没有重复循环答案

【问题标题】：CSS background gif image is not looping with repeatCSS背景gif图像没有重复循环
【发布时间】：2017-01-12 10:56:28
【问题描述】：

CSS 背景 gif 图像不循环重复。我有以下代码，但它不起作用。两个图像都呈现在另一个图像的顶部，但 gif 文件没有循环播放。

.decoration {
  display: inline-block;
  width: 365px;
  height: 650px;
  margin-top: -10px;
  background: url("https://placeholdit.imgix.net/~text?txtsize=34&txt=365%C3%97650&w=365&h=650") no-repeat center;
  background-size: cover;
  vertical-align: top;
  background-position: center center;
}
image-holder {
  width: 269px;
  height: 477px;
  margin: 77px 48px;
  background: url("http://bbsimg.ngfiles.com/1/24309000/ngbbs509571c17019a.gif") repeat center;
  background-position: center center;
  background-size: cover;
}

<div class="decoration">
  <div class="image-holder">
  </div>
</div>

【问题讨论】：

要定位图像持有者，您需要放置“。”在它面前

标签： html css

【解决方案1】：

也许你应该删除 background-size:cover;在您的图像持有人以及背景位置标签

【讨论】：

【解决方案2】：

.decoration {
    display: inline-block;
    width: 365px;
    height: 650px;
    margin-top: -10px;
   background: url("https://placeholdit.imgix.net/~text?txtsize=34&txt=365%C3%97650&w=365&h=650") no-repeat center;
    background-size: cover;
    vertical-align: top;
    background-position: center center;
}

.image-holder {
    width: 269px;
    height: 477px;
    margin: 77px 48px;
    background: url("http://bbsimg.ngfiles.com/1/24309000/ngbbs509571c17019a.gif") repeat center;
    background-position: center center;
    
}
  
    
}

<div class="decoration">
    <div class="image-holder">              
    </div>
</div>

我在这里使用了一个虚拟 gif。尝试用你的替换 gif url。

【讨论】：

谢谢。这有帮助。我发现，问题是我的 gif 文件不是 css。