新手开发者求助：如何将文本替换为图片（附代码示例）

我是编程新手，正在学习相关知识。想请教如何像示例那样将文本替换为图片，我测试了以下代码，但尝试替换时未成功，希望有人能讲解：

/* Grupos  */
.qeel_groupes a {
        color: #ffffff;
        display: block;
        font-weight: 700;
        margin: .8rem 0;
        padding: .5rem 0;
        text-align: center;
        text-transform: uppercase;
        transition: .5s all;
        border-radius: 5px;
}
.qeel_groupes a:hover {
       color: #FFFFFF !important;
}
a#q_basic {background: #000000;}
a#q_magic {background: #ad3737;}
a#q_wizard {background: #3e3b96;}

<div class="qeel_bloc">
    <div class="qeel_dernier">
        {NEWEST_USER}
    </div>
    <div class="qeel_groupes">
        <a href="g2-narradores" id="q_basic">
            Narradores
        </a>
        <a href="g3-pirata" id="q_magic">
            Piratas
        </a>
        <a href="g4-marinha" id="q_wizard">
            Marinheiros
        </a>
    </div>
</div>

有两种实用方式可以把链接内的文本替换为图片，按需选择即可：

方法1：直接用<img>标签替换文本 #

把链接里的文字替换成<img>标签，再补充CSS让图片适配按钮尺寸：

修改后的HTML #

<div class="qeel_bloc">
    <div class="qeel_dernier">
        {NEWEST_USER}
    </div>
    <div class="qeel_groupes">
        <a href="g2-narradores" id="q_basic">
            <img src="你的图片地址" alt="Narradores">
        </a>
        <a href="g3-pirata" id="q_magic">
            <img src="你的图片地址" alt="Piratas">
        </a>
        <a href="g4-marinha" id="q_wizard">
            <img src="你的图片地址" alt="Marinheiros">
        </a>
    </div>
</div>

补充CSS样式 #

.qeel_groupes a img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 让图片在按钮内居中 */
}

方法2：用CSS背景图片隐藏文本 #

保留原文本（提升无障碍访问性），通过背景图片覆盖视觉区域，同时把文本移出可视范围：

修改后的CSS #

/* Grupos  */
.qeel_groupes a {
        color: #ffffff;
        display: block;
        font-weight: 700;
        margin: .8rem 0;
        padding: .5rem 0;
        text-align: center;
        text-transform: uppercase;
        transition: .5s all;
        border-radius: 5px;
        background-size: contain; /* 背景图适配容器 */
        background-repeat: no-repeat;
        background-position: center;
        text-indent: -9999px; /* 将文本移出可视区域 */
        overflow: hidden;
}
.qeel_groupes a:hover {
       color: #FFFFFF !important;
}
a#q_basic {
    background: #000000 url("你的图片地址") center/contain no-repeat;
}
a#q_magic {
    background: #ad3737 url("你的图片地址") center/contain no-repeat;
}
a#q_wizard {
    background: #3e3b96 url("你的图片地址") center/contain no-repeat;
}

两种方法对比 #

• 方法1结构直观，适合需要直接点击图片跳转的场景；
• 方法2保留了原文本，对屏幕阅读器更友好，视觉上仅显示图片。

内容的提问来源于stack exchange，提问作者Fábio Ferreira