CSS图片遮罩失效求助：仅显示尺寸与原图一致的透明图片

1. 核心问题：遮罩的黑白逻辑搞反了 #

CSS遮罩的规则是：遮罩图的白色区域会显示下方的原图，黑色区域会隐藏内容。你的老虎遮罩图是老虎为黑色、背景为白色，应用后老虎区域会被隐藏，只显示背景白色对应的原图部分——但这部分和原图的山景重合后，视觉上就像透明图。

2. 解决步骤 #

• 反转遮罩图的黑白：把遮罩图改成老虎为白色、背景为黑色，这样老虎区域就会显示原图，背景区域透明。
• 检查图片路径：确保tiger.png和mountMaskImg.jpg的路径正确，和HTML文件在同一目录，或者用相对/绝对路径准确定位。
• 设置明确尺寸：height: fit-content可能导致尺寸计算异常，给img设置固定宽高，再配合遮罩的尺寸属性调整。

修改后的CSS示例 #

.agesciIcon {
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    /* 使用反转后的遮罩图 */
    mask-image: url(tiger-inverted.png);
    -webkit-mask-image: url(tiger-inverted.png);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

如果不想修改图片，也可以尝试用mask-mode: alpha调整遮罩模式，但反转图片是最直接的解决方法。

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