如何在p、h1、button等HTML标签上方叠加SVG或图片

修复核心问题 #

当前代码失效的核心原因：

• 相对定位仅在屏幕宽度≥769px时生效，小屏设备无定位上下文
• 包裹SVG的.signly-play容器未设置绝对定位，无法悬浮在文本上层
• 未针对h系列、button标签做适配规则

调整后可直接使用的代码 #

CSS部分

/* 所有目标标签默认开启相对定位，右侧预留空间避免SVG遮挡内容 */
.signly-text-segment, p, h1, h2, h3, h4, h5, h6, button {
    position: relative;
    padding-right: 2.5em;
}
.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}
/* SVG容器绝对定位，固定在元素右侧垂直居中位置 */
.signly-play {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 10;
    background-color: transparent;
}
.signly-text-segment div.signly-play .signly-play-icon {
    transition: opacity .25s ease-in-out;
    display: none;
    filter: drop-shadow(0 0 3px black);
}
/* 适配多标签的悬浮高亮规则 */
.signly-text-segment.play:hover,
p.play:hover,
h1.play:hover,
h2.play:hover,
h3.play:hover,
h4.play:hover,
h5.play:hover,
h6.play:hover,
button.play:hover {
    transition: background .25s ease-in-out;
    background: rgba(255, 204, 1, .5);
}
.signly-text-segment.play:hover div.signly-play * {
    color: #ffcc01;
}
.signly-text-segment.play:hover div.signly-play svg>* {
    fill: #ffcc01;
}
.signly-text-segment.play:hover div.signly-play .signly-play-icon {
    display: block;
    border-radius: 50%;
    background-color: transparent;
}
.signly-text-segment.play:hover div.signly-play .signly-play-icon.active {
    cursor: pointer;
    opacity: .25;
}
.signly-text-segment.play:hover div.signly-play .signly-play-icon.active:hover {
    opacity: 1;
}
.signly-text-segment.play:hover div.signly-play .signly-play-icon.inactive {
    display: none;
}

HTML示例（支持多标签）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- p标签 -->
<p class="signly-text-segment play" data-signly="{&quot;index&quot;:9}"
style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
滑动或点击文本查看手语
    <div class="signly-play">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" role="img"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
        class="signly-play-icon svg-inline--fa fa-play fa-w-14 fa-2x active">
            <path fill="currentColor"
            d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z">
            </path>
        </svg>
    </div>
</p>
<!-- h3标签 -->
<h3 class="signly-text-segment play">
这是标题文本
    <div class="signly-play">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" role="img"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
        class="signly-play-icon svg-inline--fa fa-play fa-w-14 fa-2x active">
            <path fill="currentColor"
            d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z">
            </path>
        </svg>
    </div>
</h3>
<!-- button标签 -->
<button class="signly-text-segment play" style="padding: 8px 2.5em 8px 12px;">
这是按钮
    <div class="signly-play">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" role="img"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
        class="signly-play-icon svg-inline--fa fa-play fa-w-14 fa-2x active">
            <path fill="currentColor"
            d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z">
            </path>
        </svg>
    </div>
</button>

如果需要调整SVG的位置，修改.signly-play的top、right参数即可，也可改成left实现左侧悬浮效果。

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