百度贴吧超级会员图标样式
逛贴吧的时候看见百度贴吧的超级会员挺好看的，反手一个保存，结果是两张图组合的。于是研究了一下，把样式放在这里吧
<!-- VIP 会员图标 --><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 { margin-bottom: 8px; }
.tooltip__popper { margin-top: 8px; }
.tooltip__popper { margin-right: 8px; }
.tooltip__popper { 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;
}
.popper__arrow {
bottom: -5px;
border-top-color: #303133;
border-bottom-width: 0;
}
.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> 这个好！十分有用！感谢 大佬出手，必属精品！ 谁会拒绝来看一眼大佬的文章呢！
页:
[1]