网站PNG图片颜色反转问题：线上部署后红色显示异常

将网站部署到GitHub Pages后，红色PNG按钮颜色反转（显示为青色），其他颜色图片显示正常。检查发现红色按钮元素被自动添加了base64格式的background-image，覆盖了原有CSS中的图片路径；但本地服务器环境下显示完全符合预期。

相关代码 #

HTML代码 #

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>The Simons Game</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="shortcut icon"
      href="Game_Button/Yellow_button.png"
      type="image/x-icon" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Rye&display=swap"
      rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Body heading -->
    <h1 id="header">The Simons Game</h1>
    <h2 id="title">Press any key to start</h2>
    <!-- font size is added for removing space between buttons -->
    <!-- Buttons section -->
    <div class="contain" style="font-size: 0">
      <div type="button" id="red" class="press butn red"></div>
      <div type="button" id="blue" class="press butn blue"></div>
      <div type="button" id="green" class="press butn green"></div>
      <div type="button" id="yellow" class="press butn yellow"></div>
    </div>
    <h2 id="highscore">Highscore 0</h2>

    <input
    type="button"
    id="Soundcontroller"
    value="music"
    onclick="togglePlay(),textchange()" />
    <audio id="myAudio" src="neon-gaming-128925.mp3" loop autoplay  ></audio>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

CSS代码 #

@font-face {
  font-family: "carnival";
  src: url(Fonts/Carnevalee\ Freakshow.ttf);
}
@font-face {
  font-family: "railroad";
  src: url(Fonts/IFC\ RAILROAD\ 2.ttf);
}

body {
  text-align: center;
  background-color: red;
  background-image: url(newbg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

#header {
  padding: 1%;
  font-size: 6rem;
  font-family: "carnival", cursive;
  color: #f49d1a;
  text-shadow: #9a5d02 6px 4px;
}

h2 {
  font-size: 4rem;
  font-family: "railroad", cursive;
  color: #f49d1a;
  text-shadow: #9a5d02 4px 3px;
}

#title {
  margin-top: 2%;
  margin-bottom: 2%;
}

/* Game over Flash Screen */
.game-over {
  opacity: 0.3;
}

/* Button Container Styling */
.press {
  outline: none;
  width: 230px;
  height: 235px;
  display: inline-block;
  text-align: center;
  padding: 2%;
  margin: 20px;
}

/* Glow Buttons */
.redglow {
  background-image: url(Game_Button/Red_button_glow.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.blueglow {
  background-image: url(Game_Button/Blue_button_glow.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.greenglow {
  background-image: url(Game_Button/Green_button_glow.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.yellowglow {
  background-image: url(Game_Button/Yellow_button_glow.png);
  background-size: cover;
  background-repeat: no-repeat;
}

/* Normal Buttons */
.red {
  background-image: url(Game_Button/Red_button.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.blue {
  background-image: url(Game_Button/Blue_button.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.green {
  background-image: url(Game_Button/Green_button.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.yellow {
  background-image: url(Game_Button/Yellow_button.png);
  background-size: cover;
  background-repeat: no-repeat;
}

/* audio buttons */
#Soundcontroller {
  font-family: "railroad", cursive;
  font-size: 2.5rem;
  color: #f49d1a;
  text-shadow: #9a5d02 3px 2px;
  background: none;
  border: none;
  display: inline-block;
  position: absolute;
  /* top: 20px; */
  /* left: 100px; */
  text-align: right;
  left: 2%;
  top: 2%;
}

效果对比 #

• GitHub Pages部署后：红色按钮显示为青色（颜色反转），元素被追加了base64格式的背景图
• 本地服务器环境：红色按钮显示正常，使用CSS中指定的Red_button.png路径

1. 转换图片颜色模式 #

GitHub Pages的图片优化对CMYK模式的PNG兼容性差，容易出现颜色反转。用PS、GIMP等工具打开红色PNG，将颜色模式改为RGB后重新上传仓库。

2. 禁用GitHub Pages图片优化 #

在仓库根目录创建.nojekyll文件，阻止Jekyll的自动优化行为；若使用Jekyll，还可在_config.yml中添加：

compress_html:
  images: false

3. 强制浏览器按原图渲染 #

在CSS中给红色按钮添加渲染规则，避免浏览器自动处理图片：

.red, .redglow {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

4. 替换为SVG格式图片 #

SVG是矢量图，不会因压缩或颜色模式出现异常。将红色按钮的PNG转换为SVG，替换CSS中的图片路径即可。

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