将文字定位到浮动图片上|CSS

最新推荐文章于 2024-08-21 15:04:55 发布

绘绘～

最新推荐文章于 2024-08-21 15:04:55 发布

阅读量3.1k

点赞数 1

分类专栏： css调试文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_51126511/article/details/124523907

版权

css调试专栏收录该内容

6 篇文章 0 订阅

订阅专栏

将文字定位到浮动图片上CSS

效果展示

在这里插入图片描述

<div class="remmend-item">
    <div class="image">
        <img :src="dataItem.picUrl" alt="">
        <span> {{ playCount }} </span>
    </div>
</div>

<style>
.remmend-item {
    padding-right: 5px;
    position: relative;
    width: 33%;
    float: left;

}
.remmend-item img {
    width: 100%;
    border-radius: 5px;
}
.image span {
    position: absolute;
    top: 4px;
    right: 8%;
    z-index: 1;
    color: var(--color-high-text);
}
</style>