CSS设置黑色背景遮挡彩虹标题及图片白底问题修复

1. 彩虹文字被黑色背景覆盖的问题 #

问题原因 #

你用通配选择器*给页面所有元素（包括彩虹文字容器内部的h1标签）都强制设置了background-color: black，相当于每个元素都自带一层不透明黑底。.rainbowText的渐变背景在父div层，直接被内部h1的黑底完全遮挡，再加上你原来的动画偏移用了1000vh的超大偏移值，渐变背景直接跑到可视区域外，自然看不到效果。

修复方法 #

• 把全局黑背景从通配选择器里挪到body标签上，只给整个页面设黑底，不要给所有子元素强加背景
• 给彩虹渐变补background-size属性，调整动画偏移值和渐变尺寸匹配，让流动效果更流畅
• 补全标准background-clip属性做浏览器兼容
  修改后的对应CSS代码：

/* 全局样式移除全局背景设置 */
* {
    font-family: 'Press Start 2P', cursive;
}
/* 只给body设置页面黑色背景 */
body {
    background-color: black;
}

.rainbowText {
    margin: auto;
    /* 首尾补一个红色让循环流动衔接更自然 */
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text; /* 标准属性兼容非webkit内核浏览器 */
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: move 8s linear infinite; /* 原35s速度太慢，可自行调整数值 */
}

@keyframes move {
    to {
        /* 偏移值和background-size对应，不要用vh单位避免偏移不准 */
        background-position: 200% 0;
    }
}

2. 按钮图标白色背景去除问题 #

问题原因 #

按钮的白背景有两个来源：一是你自己给按钮设置了#f0f0f0的浅灰白色背景色，二是图标素材本身自带的白底。

修复方法 #

• 把按钮背景里的#f0f0f0色值改成transparent，去掉按钮本身的白背景
• 给按钮加mix-blend-mode: multiply（正片叠底混合模式），可以直接过滤掉素材里的纯白背景区域，无需修改原图。如果过滤后图标偏暗，再加filter: brightness(1.2)微调亮度即可
• 补background-position和background-size让图标在按钮里居中显示
  修改后的对应CSS代码：

.Rock {
    display: flexbox;
    margin: 10px;
    padding: 65px;
    background: transparent url("images/moai_1f5ff.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    mix-blend-mode: multiply; /* 过滤图标自带白底 */
}

.Paper {
    display: flexbox;
    margin: 10px;
    padding: 65px;
    background: transparent url("images/roll-of-paper_1f9fb.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    mix-blend-mode: multiply;
}

.Scissors {
    display: flexbox;
    margin: 10px;
    padding: 65px;
    background: transparent url("images/scissors_2702-fe0f.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    mix-blend-mode: multiply;
}

小提示：你HTML里的按钮容器class写的是buton-container，少拼了一个t，后续给这个容器写样式如果不生效记得改成button-container。

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