当前位置：文江博客话题详情

动画加载 gif 图像作为重复背景

发布于 2024-10-09 02:26:30 字数 409 浏览 8 评论 0原文

我想找到这样的东西：

_{（来源：opengraphicdesign.com）}

但它可以是 html 元素上的重复背景，并且看起来像一个完整的块。

例如，将 80x80 的 gif 作为 400x400 DIV 中的重复背景，会产生 400x400 大动画图像的错觉。

哪里可以找到这样的GIF

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

春风十里 2024-10-16 02:26:30

我做到了，经过一些精细的切割，我为这项工作创建了完美的图像。
这是 gif 图片：
alt text

这是一个现场演示 http://jsfiddle.net/dtxSW/94/

HTML:

<span></span>
<span></span>
<div></div>

CSS:

div {
  background:url('https://i.sstatic.net/tQTRW.gif') repeat;
  height: 500px;
}

span {
  width: 108px;
  height: 18px;
  display: block;
  background:url('https://i.sstatic.net/tQTRW.gif') repeat-x left;
}

此 gif 可以无限重复，但看起来仍然像一张完整的大动画图像。

I did it, after some fine cutting I've created the perfected image for the job.
Here is the gif image:
alt text

And here is a live demo http://jsfiddle.net/dtxSW/94/

HTML:

<span></span>
<span></span>
<div></div>

CSS:

div {
  background:url('https://i.sstatic.net/tQTRW.gif') repeat;
  height: 500px;
}

span {
  width: 108px;
  height: 18px;
  display: block;
  background:url('https://i.sstatic.net/tQTRW.gif') repeat-x left;
}

This gif can be repeated infinitely and still look as one big whole animated image.

回复收藏 0 原文