使用background-image导致按钮hover延迟及404错误求助

我在用background-image时，按钮hover状态出现严重延迟，但其他关联图片的按钮hover表现正常。控制台偶尔会弹出随即消失的“Failed to load resource: the server responded with a status of 404 (Not Found)”错误。我试过把图片放到主文件夹或和HTML、CSS文件同目录，问题还是没解决。以下是相关代码，帮忙排查问题：

HTML代码 #

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="main-image"></div>
      <div class="content"><h1>Interactive Puzzles</h1>
        <button class="themes_btn">Show me themes</button>
        <button class="play_btn">Play now</button>
    </div>
    <script src="" async defer></script>
  </body>
</html>

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');

:root{
  --theme-btn: rgba(46, 176, 236, 0.829);
  --play-btn: rgba(43, 189, 133, 0.829);
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  overflow-X: hidden;
}

.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

h1{
  font-size: 4rem;
  font-weight: bold;
  letter-spacing: .3rem;
  font-family: 'Titan One', cursive;
  color: rgba(0, 0, 0, 0.705);
  margin-bottom: 20px;
  opacity: 100%;
}

.play_btn{
  padding: 15px 30px;
  cursor: pointer;
  border: none;
  outline: none;
  background-color:var(--play-btn);
  letter-spacing: .05rem;
  font-weight: bold;
  font-family: sans-serif;
  color: rgba(0, 0, 0, 0.603);
  font-size: 1rem;
}

.play_btn:hover{
  box-shadow: 0px 0px 10px rgba(0, 128, 0, 0.39);
}

.themes_btn{
  padding: 15px 30px;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: var(--theme-btn);
  letter-spacing: .05rem;
  font-weight: bold;
  font-family: sans-serif;
  color: rgba(0, 0, 0, 0.603);
  font-size: 1rem;
  margin-right: 20px
}

.themes_btn:hover{
  box-shadow: 0px 0px 10px rgba(0, 87, 128, 0.438);
}

.main-image{
  background-image: url(main-image.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 200vh;
  width: 100vw;
  background-position: 50% 50%;
  opacity: 65%;
}

排查思路与解决方案 #

• 定位404错误
  • 核对main-image.png的文件名：注意大小写（Linux服务器区分文件名大小写）、后缀名是否正确（比如实际是.jpg却写成.png）。
  • 打开浏览器开发者工具的Network面板，刷新页面后查看所有资源的加载状态，找到触发404的具体资源路径，确认是否有隐藏的资源请求。
• 解决hover延迟问题
  • 给.main-image添加transform: translateZ(0)或will-change: transform，触发GPU加速，减轻主线程的渲染压力；
  • 若不需要2倍视口高度，将.main-image的height改为100vh，缩小渲染区域；
• 预加载背景图
  在HTML的<head>标签内添加预加载代码，提前加载背景图：

  <link rel="preload" href="main-image.png" as="image">
  

• 检查隐藏资源请求
  确认是否有未贴出的CSS/JS代码在按钮hover时触发了新的图片加载，导致404和延迟。

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