百度贴吧超级会员图标样式

飞流 1 · 发表于 2026-5-8 04:06:50

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

作者:飞流原创，未经许可，严禁转载！

逛贴吧的时候看见百度贴吧的超级会员挺好看的，反手一个保存，结果是两张图组合的。
于是研究了一下，把样式放在这里吧

<div class="tooltip" style="height:15px; cursor:pointer; display:inline-block; vertical-align:middle;">
<div class="icon_vipCom tooltip__reference" style="height:15px; width:48px; display:flex; align-items:center;">
<img src="https://tieba-ares.cdn.bcebos.com/mis/2024-3/1709519665505/3ab806db4934.webp"
class="icon_vipCom_shows_prefix"
style="width:15px; height:15px; z-index:2;">
<img src="https://tieba-ares.cdn.bcebos.com/mis/2024-3/1710248338248/be22e16ee144.png"
class="icon_vipCom_shows"
style="width:41px; height:15px; margin-left:-8px; z-index:1;">
</div>
</div>
<style>
/* 提示框基础 */
.tooltip {
display: inline-block;
vertical-align: middle;
}
.tooltip__reference:focus:hover,
.tooltip__reference:focus:not(.focusing) {
outline: 0;
}
/* 提示气泡 */
.tooltip__popper {
position: absolute;
border-radius: 4px;
padding: 4px 6px;
z-index: 9999;
font-size: 12px;
line-height: 1.2;
color: #fff;
background: #303133;
word-wrap: break-word;
}
.tooltip__popper[x-placement^=top] { margin-bottom: 8px; }
.tooltip__popper[x-placement^=bottom] { margin-top: 8px; }
.tooltip__popper[x-placement^=left] { margin-right: 8px; }
.tooltip__popper[x-placement^=right] { margin-left: 8px; }
/* 气泡箭头 */
.popper__arrow,
.popper__arrow:after {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popper__arrow { border-width: 6px; }
.popper__arrow:after {
content: "";
border-width: 5px;
}
[x-placement^=top] .popper__arrow {
bottom: -5px;
border-top-color: #303133;
border-bottom-width: 0;
}
[x-placement^=bottom] .popper__arrow {
top: -5px;
border-bottom-color: #303133;
border-top-width: 0;
}
/* VIP 图标容器 */
.icon_vipCom {
display: flex;
align-items: center;
margin-right: 4px;
}
.icon_vipCom_shows_prefix {
z-index: 2;
}
.icon_vipCom_shows {
z-index: 1;
}
/* 图片重置 */
img {
border: none;
vertical-align: top;
}
</style>

复制代码

川木 · 发表于 2026-5-8 20:09:12

这个好！十分有用！感谢

54656 · 发表于 2026-5-9 04:48:19

大佬出手，必属精品！

柒沐 777 · 发表于 2026-5-15 14:10:12

谁会拒绝来看一眼大佬的文章呢！

	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22
	麦麦管家：请遵守版规社律，保护信息安全，请勿脱离平台交易，谨防网络诈骗！#帮助中心#	01-24 12:40

[代码技巧] 百度贴吧超级会员图标样式

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

飞流广播+ 发布

累计签到LV.3

任务·年会员

幸运抽奖·皇

幸运抽奖·尊

幸运抽奖·豪

起源之星

摩羯座

推广LV.2

钻石LV.1

注册一周年

经验·剑士

经验·骑士

经验·领主

无名の勋章

国庆节

中秋节

七夕节

关于我们

常用功能

服务引导