CSS 背景 gif 图像不循环重复

Question

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>

Answer 1

.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 网址替换。

Answer 2

也许您应该删除图像支架上的

background-size: cover;

以及

background-position

标签。