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

＆＃13;

.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;
    
}
  
    
}

＆＃13;

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

＆＃13;

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

Answer 2

也许你应该删除背景尺寸：封面;在您的图像持有者和背景位置标记

CSS背景gif图像不循环重复

2 个答案: