CSS中body:after预加载图片仍无法解决社交图标hover闪烁问题

我的社交图标默认使用黑白背景图，通过:hover伪类切换为彩色背景图时出现闪烁问题。尝试用body:after伪元素预加载彩色图片，但问题依旧存在——即使移除隐藏样式也看不到预加载的图片，图片路径已确认正确，同时使用了CSS重置样式表。

相关代码 #

初始图标样式CSS

.header-main-socials {
  width: fit-content;
  height: 100%;
  padding-right: 60px;
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.socials_icons {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: cover;
}
#fb_icon { 
  background-image: url(../images/social-icons/facebook-bw.png);
}
#fb_icon:hover { 
  background-image: url(../images/social-icons/facebook.png);
}
#ig_icon { 
  background-image: url(../images/social-icons/instagram-bw.png);
}
#ig_icon:hover { 
  background-image: url(../images/social-icons/instagram.png);
}

预加载尝试的CSS

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(48, 48, 48);
}
body:after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(../images/social-icons/facebook.png) url(../images/social-icons/instagram.png);
}

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>T</title>
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/home.css">
</head>
<body>
    <header id="header-main">
        <div id="header-main-logo">
            <img src="images/trlogocustom.png" alt="TRLogo" id="logo_nav">
            <nav id="header-main-nav">
                <ul>
                    <li><a href="index.html" id="home_nav" class="active">Home</a></li>
                    <li><a href="ourpeople.html" id="people_nav">Our People</a></li>
                    <li><a href="contact.html" id="contact_nav">Contact Us</a></li>
                    <li><a href="about.html" id="about_nav">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="header-main-socials">
            <a href="https://www.facebook.com" target="_blank"><div class="socials_icons" id="fb_icon"></div></a>
            <a href="https://www.instagram.com" target="_blank"><div class="socials_icons" id="ig_icon"></div></a>
        </div>
    </header>
    <main>
        <h1>home page</h1>
    </main>
    <footer>
    </footer>
</body>
</html>

问题原因及解决办法 #

1. CSS重置样式覆盖了伪元素内容

你使用的CSS重置表可能清除了伪元素的默认content值，或者设置了优先级更高的规则。可以给body:after的content加上!important强制生效：

body:after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(../images/social-icons/facebook.png) url(../images/social-icons/instagram.png) !important;
}

2. 改用雪碧图（最可靠方案）

浏览器缓存策略可能导致预加载失效，雪碧图将黑白、彩色图标合并到一张图里，通过background-position切换，彻底避免加载延迟：

• 先将两张黑白、两张彩色图标合并为一张PNG雪碧图（比如20x40或40x20尺寸）
• 修改CSS：

.socials_icons {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/social-icons/social-sprite.png);
}
#fb_icon { 
  background-position: 0 0; /* 对应黑白Facebook位置 */
}
#fb_icon:hover { 
  background-position: 0 -20px; /* 对应彩色Facebook位置 */
}
#ig_icon { 
  background-position: -20px 0; /* 对应黑白Instagram位置 */
}
#ig_icon:hover { 
  background-position: -20px -20px; /* 对应彩色Instagram位置 */
}

3. 切换为img标签+JS预加载

用img元素替代背景图，配合JS提前加载彩色图标，确保hover时直接切换：

• 修改HTML：

<div class="header-main-socials">
  <a href="https://www.facebook.com" target="_blank">
    <img src="../images/social-icons/facebook-bw.png" alt="Facebook" id="fb_icon" class="socials_icons">
  </a>
  <a href="https://www.instagram.com" target="_blank">
    <img src="../images/social-icons/instagram-bw.png" alt="Instagram" id="ig_icon" class="socials_icons">
  </a>
</div>

• 添加JS预加载（放在body末尾）：

// 预加载彩色图标
const preloadImgs = [
  '../images/social-icons/facebook.png',
  '../images/social-icons/instagram.png'
];
preloadImgs.forEach(src => {
  const img = new Image();
  img.src = src;
});

• CSS切换：

#fb_icon:hover {
  content: url(../images/social-icons/facebook.png);
}
#ig_icon:hover {
  content: url(../images/social-icons/instagram.png);
}

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