如何加载一次Base64图片，添加超链接与标题并多次复用？

纯CSS类没法单独实现超链接功能——超链接是HTML的<a>元素负责的交互功能，CSS只管样式，不能生成可点击的链接结构。不过我们可以通过优化HTML结构+CSS类复用的方式，实现图片、标题、超链接的统一管控，避免重复代码。

具体实现步骤 #

1. 定义一个整合了图片、标题样式的CSS类，把Base64图片放在这个类里实现复用；
2. 用HTML的<a>标签作为链接容器，包裹图片区域和标题，通过CSS类统一控制样式；
3. 标题可以通过data-*属性配合CSS伪元素动态设置，或者用内部元素承载，样式统一由CSS管控。

修改后的代码示例 #

CSS部分

.image-link-card {
    display: inline-block;
    width: 125px;
    height: 75px;
    background-image: url(data:image/png;base64,iVBORw0...);
    background-size: cover;
    background-position: center;
    position: relative;
    text-decoration: none; /* 移除链接默认下划线 */
}

/* 用伪元素生成标题，从data-title属性读取内容 */
.image-link-card::after {
    content: attr(data-title);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    text-align: center;
    font-size: 12px;
    padding: 2px;
}

/* 原有样式保留 */
.table {
    width: 100%;
}

.h_global {
    font-family: "Garamond";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-align: center;
    background-color: Black;
    color: white;
}

.h1 {
    font-size: 48px;
    line-height: 10px;
    padding: 0px;
}

HTML部分

<html>
<head>
    <style>
        /* 上面的CSS代码 */
    </style>
</head>

<body>
    <table class="table">
        <tr>
            <td>
                <!-- 复用image-link-card类，通过data-title设置标题，href设置统一链接 -->
                <a href="你的目标链接地址" class="image-link-card" data-title="左侧图片标题"></a>
            </td>

            <td class="h_global h1">
                Some Text
            </td>

            <td>
                <a href="你的目标链接地址" class="image-link-card" data-title="右侧图片标题"></a>
            </td>
        </tr>
    </table>
</body>
</html>

关键说明 #

• 超链接必须依赖HTML的<a>标签，CSS无法凭空生成可点击的链接结构，但通过CSS类可以让所有链接的样式、图片资源完全统一；
• 标题通过data-title属性传递，配合伪元素渲染，既保证样式统一，又能灵活设置不同实例的标题内容；
• Base64图片只在CSS类中定义一次，所有引用该类的元素都会自动复用，避免重复编码。

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