obsidian html图片加标题 卡片式图片加标题 图片并排

[15323505154]

css样式:

/* 图片横向并排 */
.container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* 根据实际情况调整 */
    padding: 2px;
}

.image {
    flex: 1;
    margin: 2px;
    zoom: 80%;
}

.image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* 卡片式图片标题 */

/* 水平垂直居中 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 卡片 */
.content-card {
    display: inline-block;
    max-width: 100%;
    height: auto;
    /* 关键：使容器尺寸由内容（图片）决定 */
    border-radius: 4px;
    background: #fff9db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* 防止内容溢出 */
}

/* 图片区域（决定卡片宽度） */
.card-image {
    zoom: 80%;
    /* 按比例缩放 */
}

.card-image img {
    display: block;
    /* 消除img底部默认间隙 */
    object-fit: cover;
    /* 保持图片原始比例（可选，防止被拉伸） */
    width: 100%;
    /* 宽度撑满父容器 */
    height: auto;
}

/* 文字渐变 */
.gradient_text {
    font-size: 12px;
    background-image: linear-gradient(to right, #cc5de8, #22b8cf);
    -webkit-background-clip: text;
    /* 裁剪背景到文字形状 */
    -webkit-text-fill-color: transparent;
    /* 填充文字为透明，显示背景 */
    background-clip: text;
}

图片加标题例子:

<div class="center"><div class="card-image" title=标题 align="center"><img src=图片链接 style="border-radius:4px;"><span class="gradient_text">标题</span></div></div>

显示效果:

卡片式图片加标题例子:

<div class="center"><div class="content-card"><div class="card-image" title=标题 align="center"><img src=图片链接><span class="gradient_text">标题</span></div></div></div>

显示效果:

图片横向排列例子:

<div class="container"><div class="image" title=标题1 align="center"><img src=图片链接1><span class="gradient_text">标题1</span></div><div class="image" title=标题2 align="center"><img src=图片链接2><span class="gradient_text">标题2</span></div><div class="image" title=标题3 align="center"><img src=图片链接3><span class="gradient_text">标题3</span></div></div>

显示效果: