如何实现div背景图GIF点击跳转至新页面的效果？

你当前用CSS背景图承载GIF的DOM结构完全可以正常实现跳转，不需要重构原有布局，直接根据场景选下面任意一种改法即可：

方案1：纯HTML/CSS实现（无需额外JS） #

直接在原有结构外层套超链接标签，适配基础样式即可，完整示例：

<a href="目标跳转页面地址" target="_blank" style="display:block;">
  <div 
    class="col-md-7 col-sm-4 col-xs-12" 
    style="background-image: url('xx.gif'); background-size: cover; background-position: 50% 50%; min-height: 320px; cursor: pointer;" 
    id="xx" 
    data-image-url="xx.gif"
  ></div>
</a>

• 核心注意点：
  • 外层<a>必须加display:block，避免行内元素默认的高度塌陷问题
  • 保留target="_blank"属性即可实现新页面打开跳转
  • 给内部空div补适配业务场景的min-height，否则空div默认高度为0，背景GIF会完全不显示

方案2：原生JS绑定点击事件（不改动现有DOM嵌套结构） #

如果不想调整原有HTML的嵌套层级，直接给现有div绑定点击监听即可，示例代码：

// 为id为xx的块绑定点击跳转逻辑
const gifBlock = document.getElementById('xx');
gifBlock.addEventListener('click', () => {
  // 第二个参数传_blank代表新标签页打开，传_self代表当前页跳转
  window.open('目标跳转页面地址', '_blank');
})
// 补充鼠标手型样式，提示可交互
gifBlock.style.cursor = 'pointer';

• 之前方案失效的高频踩坑点：
  • 未给承载背景图的空div设置有效高度：空div默认高度为0，无论加链接还是绑事件，用户都看不到也点不到内容
  • 交互被上层元素拦截：如果该块上方存在其他透明的悬浮DOM元素，会直接拦截点击动作，导致绑定的跳转逻辑不触发
  • 未加cursor: pointer样式：哪怕跳转逻辑正常，用户没有视觉提示会误以为功能失效

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