运行HTML代码时无法加载GIF资源的技术咨询

你当前代码里的问题很明确：background-image引用的是Giphy的网页链接，不是GIF文件的直接资源地址，浏览器没法从网页URL加载图片资源。

修正步骤 #

• 打开目标GIF的Giphy页面，右键点击GIF，选择「复制图片地址」（不同浏览器选项表述可能略有不同），得到后缀为.gif的直接资源链接。
• 把CSS里的url()内容替换成这个直接链接。

修正后的代码示例 #

CSS代码

.img-1 {
  background-image: url("这里替换成复制到的GIF直接地址");
  /* 建议添加以下样式确保背景图正常显示 */
  background-size: cover;
  background-position: center;
  width: 300px;
  height: 300px;
}

HTML代码

<div class="tile">
  <div class="img-wrapper img-1">
  </div>
  <div class="caption">
    NOM NOM NOM
  </div>
</div>

另外注意：.img-1所在的容器需要设置宽高，否则背景图没有显示空间，你之前的代码里没给容器尺寸，这也是可能导致看不到图的原因之一，建议加上宽高和背景图适配样式。

内容的提问来源于stack exchange，提问作者rpovie